JavaScript脚本延迟加载的5种实现方式详解

1. defer属性

defer 属性用于 <script> 标签，旨在延迟脚本执行。该属性控制的脚本会在 HTML 文档解析结束后、DOMContentLoaded 事件触发前执行，即确保在文档完全解析后运行。

<script src="script.js" defer></script>

如示例所示，script.js 脚本会延迟加载。它在 HTML 解析完成后立即开始下载，但直到文档解析完毕才执行，具体时机在 DOMContentLoaded 事件之前。使用 defer 的优势在于不阻塞文档解析与渲染，同时保证脚本在适当时机执行，特别适合需要操作 DOM 元素的场景。

补充说明：

此处“文档”指 HTML 文档，即网页的 HTML 结构。浏览器加载网页时，会按 HTML 结构解析内容并构建 DOM（文档对象模型）树，随后进行渲染。这一过程称为“文档解析”。当文档解析完成，意味着 HTML 已被完全解析，DOM 树构建完毕，网页基本结构已建立，此时可执行后续的 JavaScript 脚本。

2. async属性

async 属性同样用于 <script> 标签，用于异步加载脚本。与 defer 不同，使用 async 加载的脚本在下载完成后会立即执行，无需等待文档解析。

<script src="script.js" async></script>

如示例所示，script.js 脚本异步加载，加载完成后立即执行，不等待文档解析。这意味着脚本可能在 DOM 树构建完成前就开始执行，因此需注意执行顺序问题。async 的主要优点是并行加载多个脚本，提升页面加载速度。但由于脚本执行时间不确定，可能影响页面渲染和其他操作，因此适合独立且不依赖文档解析顺序的脚本。

3.动态创建DOM方式

通过动态创建 DOM 实现 JavaScript 脚本延迟加载，可利用 JavaScript 动态生成 <script> 元素并设置属性以达到延迟加载效果。具体步骤如下：

• 创建一个 <script> 元素。
• 设置该 <script> 元素的 src 属性为要延迟加载的 JavaScript 文件的 URL。
• 如需，可设置其他属性，如 defer 或 async。
• 将该 <script> 元素插入到文档中，通常插入到 <head> 或 <body> 元素中。

以下是一个示例代码：

// 创建一个 <script> 元素
var scriptElement = document.createElement('script');
// 设置要延迟加载的 JavaScript 文件的 URL
scriptElement.src = 'script.js';
// 设置属性以实现延迟加载，比如使用 defer 或 async
scriptElement.defer = true; // 或者使用 scriptElement.async = true;
// 将 <script> 元素插入到文档中
document.head.appendChild(scriptElement); // 或者插入到 document.body

通过上述步骤，可实现 JavaScript 脚本的延迟加载。脚本会在文档解析完成后开始下载，并在 DOMContentLoaded 事件触发前执行，从而避免阻塞页面渲染和交互。

4.使用setTime延迟方法

使用 setTimeout 方法延迟加载 JavaScript 脚本是一种简单直接的方式。通过 setTimeout，可在指定时间间隔后执行一段 JavaScript 代码，实现延迟加载效果。

以下是使用 setTimeout 方法延迟加载 JavaScript 脚本的示例代码：

// 使用 setTimeout 方法延迟加载 JavaScript 脚本
setTimeout(function() {
    // 创建一个 <script> 元素
    var scriptElement = document.createElement('script');
    // 设置要延迟加载的 JavaScript 文件的 URL
    scriptElement.src = 'script.js';
    // 将 <script> 元素插入到文档中
    document.head.appendChild(scriptElement); // 或者插入到 document.body
}, 2000); // 2000 毫秒即 2 秒后加载

在上述代码中，setTimeout 接受两个参数：第一个是定义要执行的 JavaScript 代码的函数；第二个是延迟时间，单位为毫秒。示例中设置延迟时间为 2000 毫秒（即 2 秒），之后执行匿名函数内的代码，包括创建 <script> 元素并插入文档，实现 JavaScript 脚本的延迟加载。

5.让JS最后加载

将 JS 脚本放置在文档底部，使 JS 脚本尽可能在最后加载执行。

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