當瀏覽器碰到 script 腳本的時候：<script src="script.js"></script>

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

async

<script async src="script.js"></script>
有 async，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進行（異步）。

defer

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

然后從實用角度來說呢，首先把所有腳本都丟到 </body> 之前是最佳實踐，因為對于舊瀏覽器來說這是唯一的優(yōu)化選擇，此法可保證非腳本的其他一切元素能夠以最快的速度得到加載和解析。

接著，我們來看一張圖咯：

284aec5bb7f16b3ef4e7482110c5ddbb_articlex.jpeg

藍色線代表網(wǎng)絡讀取，紅色線代表執(zhí)行時間，這倆都是針對腳本的；綠色線代表 HTML 解析。

此圖告訴我們以下幾個要點：

• defer 和 async 在網(wǎng)絡讀?。ㄏ螺d）這塊兒是一樣的，都是異步的（相較于 HTML 解析）
• 它倆的差別在于腳本下載完之后何時執(zhí)行，顯然 defer 是最接近我們對于應用腳本加載和執(zhí)行的要求的
• 關于 defer，此圖未盡之處在于它是按照加載順序執(zhí)行腳本的，這一點要善加利用
• async 則是一個亂序執(zhí)行的主，反正對它來說腳本的加載和執(zhí)行是緊緊挨著的，所以不管你聲明的順序如何，只要它加載完了就會立刻執(zhí)行
• 仔細想想，async 對于應用腳本的用處不大，因為它完全不考慮依賴（哪怕是最低級的順序執(zhí)行），不過它對于那些可以不依賴任何腳本或不被任何腳本依賴的腳本來說卻是非常合適的，最典型的例子：Google Analytics