[譯] async 與 defer

• 原文地址：async vs defer attributes

說明

<script>

讓咱們從定義沒有任何屬性的<script>開始。HTML 文件會被解析直到命中腳本文件，那個時候，HTML 將會中止解析而且將會發送一個請求去獲取這個文件（若是他是外鏈），在 HTML 繼續解析以前，腳本將會被執行。

<script async>

async 在 HTML 解析的同時下載文件，並且當文件完成下載以後，將會暫停 HTML 解析來執行文件。

<script defer>

defer 在 HTML 解析的同時下載文件, 而且在 HTML 解析完成後才執行它，defer 的多腳本也保證了他們以它們出如今文檔上的順序被順序執行。

我何時應該用什麼？

一般，您但願儘量使用 async, 而後是 defer, 再是沒有這些屬性的腳本。這裏有一些經常使用的規則去遵照。

• 若是腳本是模塊，而且沒有依賴其餘任何腳本時用 async
• 若是腳本依賴或者被其餘腳本依賴時用 defer
• 若是腳本文件很小，而且被一個 async 腳本依賴時用沒有異步屬性的內聯腳本，而且放在 async 腳本上方。

支持

IE9 及如下在實現 defer 的時候有一些特別嚴重的 bug，以致於腳本的執行順序沒法被保證，若是你須要支持 IE9 及如下，建議不要所有用 defer，而且對你的腳本不添加任何屬性，若是執行順序很重要。閱讀屬性說明文件

譯者總結

• defer 和 async 下載都是異步的
• defer 在 文件解析完成時（DOMContentLoaded以前）執行，async 在下載完成後執行
• 多個 defer 的執行順序和他們出如今頁面上的順序一致
• async 的執行順序沒法保證。