當(dāng)瀏覽器碰到script腳本時：

Paste_Image.png

1.不加屬性

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

沒有async和defer，瀏覽器會立即加載并執(zhí)行指定腳本，渲染該 script 標(biāo)簽之下的文檔元素之前，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行。

Paste_Image.png

2.加async

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

有 async，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）。async 在HTML解析過程中下載文件，并在完成下載后暫停HTML解析器執(zhí)行。

Paste_Image.png

3.加defer

<script defer src="myscript.js"></script>

有 defer，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進(jìn)行（異步），但是 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。

Paste_Image.png

所以，async和defer都可以使加載后續(xù)和渲染后續(xù)文檔與script.js的加載異步進(jìn)行，他們的區(qū)別是下載完成后何時執(zhí)行，async是在加載完成后立即執(zhí)行；defer是按照加載順序執(zhí)行腳本，等所有元素解析完成后執(zhí)行。