script标签中async和defer的差别

早就知道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，执行完毕，页面继续绘制。

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