js脚本同步、异步与延迟

 

一般，我们通过src引入js文件时建议在页面末尾引入，因为会阻塞页面的渲染。defer和async可以达到同样效果

 

---

 

当HTML解析器遇到<script>元素时，它必须先执行脚本，然后再恢复文档的解析和渲染。

 

脚本的执行旨在默认情况下时同步和阻塞的，我们可以为script标签添加defer和async属性（当然并不是所有浏览器支持）

使用defer和async属性，浏览器可以在下载脚本时继续解析和渲染文档

如果标签同时有这两个属性，同时支持defer和async属性时会自动忽略defer属性

如下：

<script defer src="aa.js"></script>



<script async src="bb.js"></script>

 

---

 

注意：

延迟的脚本会按它们在文档中出现的顺序执行，而异步的脚本在它们载入后执行（顺序可能无序）。