script标签中async和defer的差别

早就知道HTML5 script标签多了个async特性,但没注意到asyncdefer的差别。通过查文档,终于懂了。

1
<script src="test.js"></script>

页面的绘制会停下,等test.js下载完并执行完,才会继续绘制。

1
<script src="test.js" defer></script>

页面的绘制不会停下,test.js在背景下载,待DOMContentLoaded再执行test.js

1
<script src="test.js" async></script>

页面的绘制不会停下,test.js在背景下载,待其下载完毕,页面绘制会停下,执行test.js,执行完毕,页面继续绘制。

另,这儿有张时序图可参考。

微信环境下长按识别或保存

微信支付二维码
支付宝支付二维码