关于javascript:面试题之-script-标签中-async-和-defer-属性的区别

面试题之 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