JavaScript 延迟加载的 6 种实现方式详解

1. defer 属性

HTML 4.01 规范为 <script> 标签引入了 defer 属性。当在标签中设置此属性时，它指示浏览器立即下载脚本，但将其执行推迟到文档解析完成之后。

主要用途在于确保脚本的执行不会干扰页面的构建过程。这意味着脚本会被延迟到整个 HTML 文档解析完毕后再执行，从而避免阻塞页面渲染。

在 <script> 元素中设置 defer 属性，等同于告诉浏览器立即下载脚本，但延迟其执行时机。

需要注意的是，即使 <script> 标签放置在 <head> 元素中，包含 defer 属性的脚本也会延迟到浏览器遇到 </html> 标签后再执行。

HTML5 规范规定脚本应按其出现的先后顺序执行。然而在实际运行环境中，延迟脚本并不保证严格按照声明顺序执行。

defer 属性仅适用于外部脚本文件（即通过 src 引入的文件）。对于 HTML5 兼容的浏览器实现，嵌入在文档中的脚本（内联脚本）若设置了 defer 属性，该属性将被忽略。

2. async 属性

HTML5 为 <script> 标签定义了 async 属性。与 defer 类似，它用于改变脚本的处理行为，且同样仅适用于外部脚本文件。

其目的是防止页面等待脚本下载和执行，从而允许异步加载页面的其他内容，提升用户感知速度。

异步脚本保证在页面 load 事件触发前执行。

然而，async 不保证脚本会按照它们在文档中出现的顺序执行。

与 defer 一样，async 不会阻塞其他资源的下载，因此不会影响页面的初始加载过程。

其缺点在于无法控制脚本的加载和执行顺序。

3. 动态创建 DOM 方式

4. 使用 jQuery 的 getScript() 方法

5. 使用 setTimeout 延迟方法的加载时间

通过延迟加载 JS 代码，可以为网页的主要加载过程留出更多时间，从而提升首屏体验。

6. 让 JS 最后加载

将外部引入的 JS 文件放置在页面底部，可以确保 JS 最后被引入，从而加快页面的整体加载速度。

例如，在引入外部 JS 脚本文件时，如果将其放入 HTML 的 <head> 中，则该 JS 脚本会在页面加载前被加载入页面；而若放入 <body> 中，则会按照页面从上到下的加载顺序来运行 JavaScript 代码。

因此，我们可以将 JS 外部引入的文件放到页面底部，来让 JS 最后引入，从而加快页面加载速度。

上述方法（如方法 2）偶尔会触发 Google 页面速度测试工具发出“延迟加载 javascript”的警告。因此，这里的解决方案采用来自 Google 帮助页面的推荐方案。

这段代码的含义是：等待整个文档加载完成后，再加载外部文件“defer.js”。

使用此段代码的步骤如下：

1）复制上述代码。

2）将代码粘贴到 HTML 标签前（靠近 HTML 文件底部）。

3）将“defer.js”修改为你实际的外部 JS 文件名。

4）确保文件路径正确。例如：如果仅输入“defer.js”，那么“defer.js”文件必须与 HTML 文件位于同一文件夹下。

注意：

这段代码直到文档加载完毕才会加载指定的外部 JS 文件。因此，不应将那些页面正常加载所依赖的 JavaScript 代码放在这里。而应该将 JavaScript 代码分为两组：一组是因页面需要而立即加载的 JavaScript 代码；另一组是在页面加载后进行操作的 JavaScript 代码（例如添加 click 事件或其他交互）。这些需等到页面加载后再执行的 JavaScript 代码，应放在一个外部文件中，然后再引入。

在元素中设置defer属性，等于告诉浏览器立即下载，但延迟执行元素中设置defer属性，等于告诉浏览器立即下载，但延迟执行元素中设置defer属性，等于告诉浏览器立即下载，但延迟执行。

总结

到此这篇关于 js 延迟加载的 6 种方式的文章就介绍到这了，更多相关 js 延迟加载方式内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！