早就知道 HTML5 script 标签多了个async
特性,但没注意到async
和defer
的差别。通过查文档,终于懂了。
<script src="test.js"></script>
页面的绘制会停下,等test.js
下载完并执行完,才会继续绘制。
<script src="test.js" defer></script>
页面的绘制不会停下,test.js
在背景下载,待DOMContentLoaded再执行test.js
。
<script src="test.js" async></script>
页面的绘制不会停下,test.js
在背景下载,待其下载完毕,页面绘制会停下,执行test.js
,执行完毕,页面继续绘制。
另,这儿有张时序图可参考。