你不知道的 script 標簽的 defer 與 async 屬性

我持續組織了近一年的源碼共讀活動，感興趣的可以?點此掃碼加我微信?ruochuan12?參與，每周大家一起學習200行左右的源碼，共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》?包含20余篇源碼文章。歷史面試系列。另外：目前建有江西|湖南|湖北籍前端群，可加我微信進群。

前言

在面試的時候，經常會遇到一道經典的面試題：

如何優化網頁加載速度？

常規的回答中總會有一條：

把 css 文件放在頁面頂部，把 js 文件放在頁面底部。

那么，為什么要把 js 文件放在頁面的最底部呢？

我們先來看下這段代碼：

<!DOCTYPE?html>
<html?lang="zh"><head><title>Hi</title><script>console.log("Howdy?~");</script><script?src="https://unpkg.com/vue@3.2.41/dist/vue.global.js"></script><script?src="https://unpkg.com/vue-router@4.1.5/dist/vue-router.global.js"></script></head><body>Hello?👋🏻?~</body>
</html>

他的執行順序是：

在控制臺打印：Howdy ~
請求并執行 vue.global.js
請求并執行 vue-router.global.js
在頁面中展示：Hello 👋🏻 ~
觸發 DOMContentLoaded^[1] 事件

script 加載邏輯

瀏覽器的解析規則是：如果遇到 script 標簽，則暫停構建 DOM，轉而開始執行 script 標簽，如果是外部 script^[2]，那么瀏覽器還需要一直等待其「下載」并「執行」后，再繼續解析后面的 HTML。

如果請求并執行「vue.global.js」需要 3 秒，「vue-router.global.js」需要 2 秒，那么頁面中的 Hello 👋🏻 ~，則至少需要 5 秒以上才會展示出來。

可以看到，script 標簽會阻塞瀏覽器解析 HTML，如果把 script 都放在 head 中，在網絡不佳的情況下，就會導致頁面長期處于白屏狀態。

在很久以前，一般都是將這些外聯腳本，放在 body 標簽的最后面，確保先解析展示 body ?中的內容，然后再一個個請求執行這些外聯腳本。

那有沒有其他更優雅的解決方案呢？

答案是肯定的，現在 script ?標簽新增了 2 個屬性：defer 和 async，就是為了解決此類問題，提升頁面性能的。

`<script defer>`

先看一下 MDN 上的解釋：

這個布爾屬性被設定用來通知瀏覽器該腳本將在文檔完成解析后，觸發 DOMContentLoaded 事件前執行。
有 defer 屬性的腳本會阻止 DOMContentLoaded 事件，直到腳本被加載并且解析完成。

文檔是直接總結了他的特性，我們先看看下面的代碼，展開說說細節，加深一下理解。

<!DOCTYPE?html>
<html?lang="zh"><head><title>Hi</title><script>console.log("Howdy?~");</script><script?defer?src="https://unpkg.com/vue@3.2.41/dist/vue.global.js"></script><script?defer?src="https://unpkg.com/vue-router@4.1.5/dist/vue-router.global.js"></script></head><body>Hello?👋🏻?~</body>
</html>

他的執行順序是：

在控制臺打印：Howdy ~
在頁面中展示：Hello 👋🏻 ~
請求并執行 vue.global.js
請求并執行 vue-router.global.js
觸發 DOMContentLoaded^[3] 事件

script defer 加載邏輯

如果在 script 標簽上設置了 defer 屬性，那么在瀏覽器解析到這里時，會默默的在后臺開始下載此腳本，并繼續解析后面的 HTML，并不會阻塞解析操作。

等到 HTML 解析完成之后，瀏覽器會立即執行后臺下載的腳本，腳本執行完成之后，才會觸發 DOMContentLoaded 事件。

看起來還是蠻好理解的吧？咱們再來討論 2 個小細節：

Q1： 如果 HTML 解析完成之后，設置了 defer 屬性的腳本還沒下載完成，會怎樣？

A1： 瀏覽器會等腳本下載完成之后，再執行此腳本，執行完成之后，再觸發 DOMContentLoaded 事件。

Q2： 如果有多個設置了 defer 屬性的腳本，那瀏覽器會如何處理？

A2： 瀏覽器會并行的在后臺下載這些腳本，等 HTML 解析完成，并且所有腳本下載完成之后，再按照他們在 HTML 中出現的相對順序執行，等所有腳本執行完成之后，再觸發 DOMContentLoaded 事件。

最佳實踐：

建議所有的外聯腳本都默認設置此屬性，因為他不會阻塞 HTML 解析，可以并行下載 JavaScript 資源，還可以按照他們在 HTML 中的相對順序執行，確保有依賴關系的腳本運行時，不會缺少依賴。

在 SPA 的應用中，可以考慮把所有的 script 標簽加上 defer 屬性，并且放到 body 的最后面。在現代瀏覽器中，可以并行下載提升速度，也可以確保在老瀏覽器中，不阻塞瀏覽器解析 HTML，起到降級的作用。

注意：

defer 屬性僅適用于外部腳本，如果 script 腳本沒有 src，則會忽略 defer 特性。
defer 屬性對模塊腳本（script type='module'^[4]）無效，因為模塊腳本就是以 defer 的形式加載的。

`<script async>`

按照慣例，先看一下 MDN 上的解釋：

對于普通腳本，如果存在 async 屬性，那么普通腳本會被并行請求，并盡快解析和執行。
對于模塊腳本，如果存在 async 屬性，那么腳本及其所有依賴都會在延緩隊列中執行，因此它們會被并行請求，并盡快解析和執行。
該屬性能夠消除解析阻塞的 Javascript。
解析阻塞的 Javascript 會導致瀏覽器必須加載并且執行腳本，之后才能繼續解析。

感覺這段描述的已經蠻清晰了，不過咱們還是先看看下面的代碼，展開說說細節，加深一下理解。

<!DOCTYPE?html>
<html?lang="zh"><head><title>Hi</title><script>console.log("Howdy?~");</script><script?async?src="https://google-analytics.com/analytics.js"></script><script?async?src="https://ads.google.cn/ad.js"></script></head><body>Hello?👋🏻?~</body>
</html>

他的執行順序是：

在控制臺打印：Howdy ~
并行請求 analytics.js 和 ad.js
在頁面中展示：Hello 👋🏻 ~
根據網絡的實際情況，以下幾項會無序執行
- 執行 analytics.js（下載完后，立即執行）
- 執行 ad.js（下載完后，立即執行）
- 觸發 DOMContentLoaded 事件（可能在在上面 2 個腳本之前，之間，之后觸發）