延迟加载JS的方式

JS延迟加载就是等dom（页面）加载完成之后再加载js文件，这样有助于提高页面加载速度，用户体验更好一般延迟加载js方式有①defer属性②async属性③动态创建DOM④使用jq的getScript方法⑤使用setTimeout延迟加载脚本⑥将script引入放在最后（底部）加载其中比较重要的就是defer和async方式这里举个栗子a.jstest.html这时候会正常打印出div元素，这也就

优雅的猪

4382人浏览 · 2022-07-16 13:37:07

优雅的猪 · 2022-07-16 13:37:07 发布

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。