当前位置：网站首页>延迟加载JS的方式

延迟加载JS的方式

2022-07-17 15:18:00 【会说法语的猪】

JS延迟加载就是等dom（页面）加载完成之后再加载js文件，这样有助于提高页面加载速度，用户体验更好

一般延迟加载js方式有：

① defer属性
② async属性
③ 动态创建DOM
④ 使用jq的getScript方法
⑤ 使用setTimeout延迟加载脚本
⑥ 将script引入放在最后（底部）加载

其中比较重要的就是 defer 和 async方式

这里举个栗子：

a.js

console.log(document.getElementById('myDiv'), '----->>>')

test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 外部引入 a.js -->
  <script src="./a.js"></script>
</head>
<body>
  <div id="myDiv">wft</div>
</body>
</html>

这样执行，我们拿不到div元素，打印出个null ，这是因为先去执行的script(即a.js)中的代码，然后再加载下面的dom元素，自然拿不到。这个时候如果说a.js中的出现错误，将会导致页面上什么都加载不出来。

如果说我们将script放在最后执行，如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="myDiv">wft</div>
  
  <script src="./a.js"></script>
</body>
</html>

这时候会正常打印出div元素，这也就是我们上面说的放在底部最后执行

放在上面加上defer，如下：

defer

<!-- 外部引入 a.js -->
<script defer src="./a.js"></script>

我们发现可以正常打印div元素

虽然<script> 元素放在了<head>元素中，但包含的脚本将延迟浏览器遇到</html>标签后再执行
就是等html全部解析完成，才会执行js代码，顺次js脚本

async

同样的我们将上面的defer换成async，如下：

<!-- 外部引入 a.js -->
<script async src="./a.js"></script>

我们发现同样的也能拿到div元素，也同样的实现了延迟加载脚本

HTML5 为 <script>标签定义了 async属性。与defer属性类似，都用于改变处理脚本的行为。同样，只适用于外部脚本文件。
目的：不让页面等待脚本下载和执行，从而异步加载页面其他内容。
异步脚本一定会在页面 load 事件前执行。
不能保证脚本会按顺序执行。

defer 和 async区别

defer是顺次执行的，但async不是。

async不能控制外部脚本的加载顺序

比如：

<!-- 外部引入 a.js -->
<script defer src="./a.js"></script>
<script defer src="./b.js"></script>
<script defer src="./c.js"></script>

上面延迟三个脚本的加载，现在使用的是defer，加载脚本的时候，一定会是按照 a - > b -> c的顺序（就是先执行a.js再执行b.js最后执行c.js）执行的，如果换成async，也同样的可以延迟加载js脚本，但是顺序就不确定了，谁先加载完就先执行谁，所以如果说c.js依赖于b.js，那么一定不能使用async。

原网站

版权声明
本文为[会说法语的猪]所创，转载请带上原文链接，感谢
https://blog.csdn.net/m0_51431448/article/details/125818681