JavaScript脚本延迟加载的方式有哪些

1.defer属性

defer 属性是用于延迟脚本的执行，它可以用于 <script> 标签中。使用 defer 属性加载的脚本会在 HTML 解析完毕后，DOMContentLoaded 事件触发之前执行，即在文档完全解析后才会执行脚本。

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

在上面的例子中，script.js 脚本会被延迟加载，并且会在 HTML 解析完成后立即开始下载，但直到文档解析完成后才会执行，即在 DOMContentLoaded 事件之前执行。
使用 defer 属性的好处是，它不会阻塞文档的解析和渲染，同时保证了脚本在合适的时机执行。这对于需要确保脚本在 DOM 树完全构建之后执行的情况非常有用，例如对于需要操作 DOM 元素的脚本。

补充：

在这里，“文档"指的是指HTML文档，即网页的HTML结构。在浏览器中加载网页时，浏览器会按照HTML文档中的结构解析网页内容，构建DOM（文档对象模型）树，然后再进行渲染显示给用户。这个过程中，HTML文档的解析和构建DOM树称为"文档解析”。所以，当我们说文档解析完成时，意味着HTML文档已经被完全解析，DOM树已经构建完成，网页的基本结构已经建立好了，可以开始执行后续的JavaScript脚本了。

2.async属性

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

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

在上面的例子中，script.js 脚本会被异步加载，并且在加载完成后立即执行，不会等待文档的解析。这意味着脚本的执行可能会在 DOM 树构建完成之前开始，因此在使用 async 属性时要注意可能出现的执行顺序问题。
使用 async 属性的主要优点是可以并行加载多个脚本，从而提高页面加载速度。但需要注意的是，由于脚本的执行时间不确定，可能会影响到页面的渲染和其他操作。因此，适合使用 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 文件的 URLscriptElement.src = 'script.js';// 将 <script> 元素插入到文档中document.head.appendChild(scriptElement); // 或者插入到 document.body
}, 2000); // 2000 毫秒即 2 秒后加载

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