详解JS异步加载的三种方式

2023年6月11日上午11:25 • JavaScript

详解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技术站