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

更新时间：2024年04月15日 11:02:11 作者：不想秃头程序员

本文主要介绍了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 脚本的延迟加载。

5.让JS最后加载

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

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

您可能感兴趣的文章:

一文带你了解微信小程序数据绑定、事件绑定以及事件传参、数据同步
在微信小程序日常开发中,特定场景下我们需要事件携带参数到要执行的函数中,下面这篇文章主要给大家介绍了关于微信小程序数据绑定、事件绑定以及事件传参、数据同步的相关资料,需要的朋友可以参考下
2022-11-11
javascript offsetX与layerX区别
FF没有offsetX属性，有个layerX属性，只要将事件源的位置设置成相对定位(position:relative)或绝对定位(position:absolute)，两者结果就相等，表示事件源相对于父元素的X坐标。
2010-03-03
微信小程序开发常用功能点与使用方法总结
最近收集了一些小程序开发中常用到的知识点,记录一下,所以下面这篇文章主要给大家介绍了关于微信小程序开发常用功能点与使用方法的相关资料,需要的朋友可以参考下
2021-10-10
微信小程序自定义可搜索的picker组件示例详解
这篇文章主要介绍了微信小程序自定义可搜索的picker组件,主要包括自定义可搜索的picker组件的代码以及调用实例，这里的搜索框使用的是vant微信小程序组件库，picker使用的微信小程序的原生组件，需要的朋友可以参考下
2022-06-06
TypeScript条件类型与内置条件类型超详细讲解
我们可以使用TypeScript中的条件类型来根据逻辑定义某些类型，就像是在编写代码那样。它采用的语法和我们在JavaScript中熟悉的三元运算符很像：condition ? ifConditionTrue : ifConditionFalse。我们来看看他是怎么工作的
2023-03-03
webpack热模块替换（HMR）/热更新的方法
模块热替换(HMR)的作用是，在应用运行时，无需刷新页面，便能替换、增加、删除必要的模块，本篇文章主要介绍了webpack热模块替换（HMR）/热更新的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
Javascript前端事件循环机制详细讲解
单线程的同步等待极大影响效率，任务不得不一个一个等待执行，对于网页应用是无法接受的。所以Javascript使用事件循环机制来解决异步任务的问题。本文就来讲讲Javascript的事件循环机制，希望对你有所帮助
2022-12-12
JavaScript实现鼠标移入随机变换颜色
这篇文章主要给大家介绍了关于JavaScript实现鼠标移入随机变换颜色的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11
基于Bootstrap实现tab标签切换效果
这篇文章主要为大家详细介绍了基于Bootstrap实现tab标签切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-05-05
JS定义网页表单提交（submit）的方法
这篇文章主要介绍了JS定义网页表单提交（submit）的方法,实例分析了javascript实现表单提交执行自定义函数的方法,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03