JavaScript脚本延迟加载有哪些方式_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 文件的 url
    scriptelement.src = 'script.js';
    // 将 <script> 元素插入到文档中
    document.head.appendchild(scriptelement); // 或者插入到 document.body
}, 2000); // 2000 毫秒即 2 秒后加载

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