面试题之 script 标签中 async 和 defer 属性的区别
原文浏览
最近在做网页性能优化方面的货色，用 chrome devTools 的性能检测工具 lighthouse 跑了一遍后，发现其中有一项是Efficiently load third-party JavaScript，就是咱们在我的项目中用 script 标签援用的第三方库。
首先咱们应该把这个 script 标签写在 body 外面，这样浏览器在加载 html 文档的时候就不会去解析 js，这样会阻止 html 的渲染。
怎么优化加载第三方脚本？
其中一种形式就是在 script 标签上加上 async 或者 defer 属性。
像这样：
<script async src="script.js">
<script defer src="script.js">async
async 属性的执行是在脚本下载完之后，在 window 的 load 事件产生之前。如果这个时候文档还没有解析齐全意味着它们能够阻止 DOM 构建。
defer
defer 属性的执行是在文档齐全解析实现后进行的，在 window 的 DOMContentLoaded 事件之前。defer 属性就能够保障它们执行是依照它们呈现在 HTML 中的程序来的，并且不会阻止主线程的渲染。
- 如果这个脚本在加载晚期要执行就能够用
async - 如果这个脚本没那么重要就能够应用
defer
参考资料
efficiently-load-third-party-javascript