详解JS异步加载的三种方式
JS异步加载指的是JavaScript代码在浏览器中执行时,通过非阻塞IO的方式,使得代码的执行不会阻塞页面的渲染和交互,从而提升用户体验。而JS异步加载的方式主要有以下三种:
1. defer
使用 defer 属性可以将脚本的加载推迟到文档的解析和显示完成之后再执行。这个过程会是解析 HTML 文档和执行 JS 脚本并行进行的,因此当 JS 脚本被执行时,整个 DOM 树仍然是完整的,可以立即操作。
<!DOCTYPE html>
<html lang="en">
<head>
<title>defer demo</title>
<script defer src="main.js"></script>
</head>
<body>
<h1>defer demo</h1>
<p>Some content</p>
</body>
</html>
上述代码中,main.js 的加载和执行被推迟到了整个 HTML 文档加载完毕后,也就是在 DOMContentLoaded 事件触发前。在这个时候,DOM 树已经构建完毕,main.js 可以操作文档中的元素。
2. async
与 defer 不同,使用 async 属性可以让脚本异步加载并执行。当浏览器遇到 async 属性时,会在文档加载和渲染的同时,异步加载并执行脚本,从而不会阻塞页面的渲染和交互。但与此同时,由于 JavaScript 的异步执行特性,脚本的加载和执行顺序不能保证,因此使用 async 属性的脚本一般不能依赖于页面的其他元素。
<!DOCTYPE html>
<html lang="en">
<head>
<title>async demo</title>
</head>
<body>
<h1>async demo</h1>
<p>Some content</p>
<script async src="main.js"></script>
</body>
</html>
在上述示例中,main.js 异步加载并执行,不会阻塞页面的渲染。但是需要注意的是,如果页面上还存在其他 JS 脚本,那么它们的加载和执行也是异步的,且顺序不可预知,可能会造成一些难以预料的问题。
3. 动态插入
动态插入 JavaScript 脚本是一种常见的异步加载方式。在页面上预留好一个 script 标签,然后使用 JavaScript 动态插入具体的脚本路径,即可实现异步加载。
<!DOCTYPE html>
<html lang="en">
<head>
<title>dynamic load demo</title>
</head>
<body>
<h1>动态加载 JavaScript</h1>
<p>使用JS动态加载main.js文件</p>
<script>
var script = document.createElement('script');
script.src = 'main.js';
document.body.appendChild(script);
</script>
</body>
</html>
在上述示例中,通过 JavaScript 动态地创建一个 script 元素,并将其 src 属性设置为 main.js 的路径。然后通过 document.body.appendChild 方法将该元素插入到文档中即可实现异步加载。需要注意的是,这种方式也是无法保证多个脚本的执行顺序的。
综上所述,以上三种方式都能实现 JS 的异步加载。需要根据具体场景的要求,选择适合的一种方式来使用。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:详解JS异步加载的三种方式 - Python技术站