您的位置：首页 > Web前端

解决阻塞效应之defer和async

2018-01-03 17:56 239 查看

1、正常的网页加载流程

1. 浏览器一边下载HTML网页，一边开始解析

2. 解析过程中，发现
<script>
标签

3. 暂停解析，网页渲染的控制权转交给JavaScript引擎

4. 如果
<script>
标签引用了外部脚本，就下载该脚本，否则就直接执行

5. 执行完毕，控制权交还渲染引擎，恢复往下解析HTML网页

如果外部脚本加载时间很长（比如一直无法完成下载），就会造成网页长时间失去响应，浏览器就会呈现“假死”状态，这被称为“阻塞效应”。

为了避免这种情况，较好的做法是将

<script>

标签都放在页面底部，而不是头部。这样做有两个好处，

1、遇到脚本失去响应，网页主体的渲染也已经完成了，用户至少可以看到内容，而不是面对一张空白的页面。
2、在DOM结构生成之前就调用DOM，JavaScript会报错，如果脚本都在网页尾部加载，就不存在这个问题，因为这时DOM肯定已经生成了。

2、defer属性

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

defer的运行流程如下

1. 浏览器开始解析HTML网页

2. 解析过程中，发现带有defer属性的script标签

3. 浏览器继续往下解析HTML网页，同时并行下载script标签中的外部脚本

4. 浏览器完成解析HTML网页，此时再执行下载的脚本

只有等到DOM加载完成后，才会执行a.js和b.js

3、async属性

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

async的运行流程如下

1. 浏览器开始解析HTML网页

2. 解析过程中，发现带有async属性的script标签

3. 浏览器继续往下解析HTML网页，同时并行下载script标签中的外部脚本

4. 脚本下载完成，浏览器暂停解析HTML网页，开始执行下载的脚本

5. 脚本执行完毕，浏览器恢复解析HTML网页

async属性可以保证脚本下载的同时，浏览器继续渲染。但一旦采用这个属性，就无法保证脚本的执行顺序。哪个脚本先下载结束，就先执行那个脚本。

总之，如果脚本之间没有依赖关系，就使用async属性，如果脚本之间有依赖关系，就使用defer属性。如果同时使用async和defer属性，后者不起作用，浏览器行为由async属性决定。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 阻塞效应 defer async 网页加载

相关文章推荐

新的分享

章节导航