學習 Async，Defer 和動態腳本，本文就夠了！
腳本：async，defer
現代的網站中，腳本往往比 HTML 更“重”：它們的大小通常更大，處理時間也更長。
當瀏覽器加載 HTML 時遇到 標簽，瀏覽器就不能繼續構建 DOM。它必須立刻執行此腳本。對于外部腳本 也是一樣的：瀏覽器必須等腳本下載完，并執行結束，之后才能繼續處理剩余的頁面。
這會導致兩個重要的問題：
- 腳本不能訪問到位于它們下面的 DOM 元素，因此，腳本無法給它們添加處理程序等。
- 如果頁面頂部有一個笨重的腳本，它會“阻塞頁面”。在該腳本下載并執行結束前，用戶都不能看到頁面內容：
- <p>...content before script...</p>
- <script src="https://javascript.info/article/script-async-defer/long.js?speed=1"></script>
- <!-- This isn't visible until the script loads -->
- <p>...content after script...</p>
這里有一些解決辦法。例如，我們可以把腳本放在頁面底部。此時，它可以訪問到它上面的元素，并且不會阻塞頁面顯示內容：
- <body>
- ...all content is above the script...
- <script src="https://javascript.info/article/script-async-defer/long.js?speed=1"></script>
- </body>
但是這種解決方案遠非完美。例如，瀏覽器只有在下載了完整的 HTML 文檔之后才會注意到該腳本(并且可以開始下載它)。對于長的 HTML 文檔來說，這樣可能會造成明顯的延遲。
這對于使用高速連接的人來說，這不值一提，他們不會感受到這種延遲。但是這個世界上仍然有很多地區的人們所使用的網絡速度很慢，并且使用的是遠非完美的移動互聯網連接。
幸運的是，這里有兩個 <script> 特性（attribute）可以為我們解決這個問題：defer 和 async。
defer
defer 特性告訴瀏覽器不要等待腳本。相反，瀏覽器將繼續處理 HTML，構建 DOM。腳本會“在后臺”下載，然后等 DOM 構建完成后，腳本才會執行。
這是與上面那個相同的示例，但是帶有 defer 特性：
- <p>...content before script...</p>
- <script defer src="https://javascript.info/article/script-async-defer/long.js?speed=1"></script>
- <!-- 立即可見 -->
- <p>...content after script...</p>
換句話說：
- 具有 defer 特性的腳本不會阻塞頁面。
- 具有 defer 特性的腳本總是要等到 DOM 解析完畢，但在 DOMContentLoaded 事件之前執行。
下面這個示例演示了上面所說的第二句話：
- <p>...content before scripts...</p>
- <script>
- document.addEventListener('DOMContentLoaded', () => alert("DOM ready after defer!"));
- </script>
- <script defer src="https://javascript.info/article/script-async-defer/long.js?speed=1"></script>
- <p>...content after scripts...</p>
- 頁面內容立即顯示。
- DOMContentLoaded 事件處理程序等待具有 defer 特性的腳本執行完成。它僅在腳本下載且執行結束后才會被觸發。
具有 defer 特性的腳本保持其相對順序，就像常規腳本一樣。
假設，我們有兩個具有 defer 特性的腳本：long.js 在前，small.js 在后。
- <script defer src="https://javascript.info/article/script-async-defer/long.js"></script>
- <script defer src="https://javascript.info/article/script-async-defer/small.js"></script>
瀏覽器掃描頁面尋找腳本，然后并行下載它們，以提高性能。因此，在上面的示例中，兩個腳本是并行下載的。small.js 可能會先下載完成。
……但是，defer 特性除了告訴瀏覽器“不要阻塞頁面”之外，還可以確保腳本執行的相對順序。因此，即使 small.js 先加載完成，它也需要等到 long.js 執行結束才會被執行。
當我們需要先加載 JavaScript 庫，然后再加載依賴于它的腳本時，這可能會很有用。
defer 特性僅適用于外部腳本
如果 <script> 腳本沒有 src，則會忽略 defer 特性。
async
async 特性與 defer 有些類似。它也能夠讓腳本不阻塞頁面。但是，在行為上二者有著重要的區別。
async 特性意味著腳本是完全獨立的：
- 瀏覽器不會因 async 腳本而阻塞（與 defer 類似）。
- 其他腳本不會等待 async 腳本加載完成，同樣，async 腳本也不會等待其他腳本。
- DOMContentLoaded 和異步腳本不會彼此等待：
- DOMContentLoaded 可能會發生在異步腳本之前（如果異步腳本在頁面完成后才加載完成）
- DOMContentLoaded 也可能發生在異步腳本之后（如果異步腳本很短，或者是從 HTTP 緩存中加載的）
換句話說，async 腳本會在后臺加載，并在加載就緒時運行。DOM 和其他腳本不會等待它們，它們也不會等待其它的東西。async 腳本就是一個會在加載完成時執行的完全獨立的腳本。就這么簡單，現在明白了吧？
下面是一個類似于我們在講 defer 時所看到的例子：long.js 和 small.js 兩個腳本，只是現在 defer 變成了 async。
它們不會等待對方。先加載完成的（可能是 small.js）—— 先執行：
- <p>...content before scripts...</p>
- <script>
- document.addEventListener('DOMContentLoaded', () => alert("DOM ready!"));
- </script>
- <script async src="https://javascript.info/article/script-async-defer/long.js"></script>
- <script async src="https://javascript.info/article/script-async-defer/small.js"></script>
- <p>...content after scripts...</p>
- 頁面內容立刻顯示出來：加載寫有 async 的腳本不會阻塞頁面渲染。
- DOMContentLoaded 可能在 async 之前或之后觸發，不能保證誰先誰后。
- 較小的腳本 small.js 排在第二位，但可能會比 long.js 這個長腳本先加載完成，所以 small.js 會先執行。雖然，可能是 long.js 先加載完成，如果它被緩存了的話，那么它就會先執行。換句話說，異步腳本以“加載優先”的順序執行。
當我們將獨立的第三方腳本集成到頁面時，此時采用異步加載方式是非常棒的：計數器，廣告等，因為它們不依賴于我們的腳本，我們的腳本也不應該等待它們：
- <!-- Google Analytics 腳本通常是這樣嵌入頁面的 -->
- <script async src="https://google-analytics.com/analytics.js"></script>
動態腳本
此外，還有一種向頁面添加腳本的重要的方式。
我們可以使用 JavaScript 動態地創建一個腳本，并將其附加（append）到文檔（document）中：
- let script = document.createElement('script');
- script.src = "/article/script-async-defer/long.js";
- document.body.append(script); // (*)
當腳本被附加到文檔 (*) 時，腳本就會立即開始加載。
默認情況下，動態腳本的行為是“異步”的。
也就是說：
- 它們不會等待任何東西，也沒有什么東西會等它們。
- 先加載完成的腳本先執行（“加載優先”順序）。
如果我們顯式地設置了 script.async=false，則可以改變這個規則。然后腳本將按照腳本在文檔中的順序執行，就像 defer 那樣。
在下面這個例子中，loadScript(src) 函數添加了一個腳本，并將 async 設置為了 false。
因此，long.js 總是會先執行（因為它是先被添加到文檔的）：
- function loadScript(src) {
- let script = document.createElement('script');
- script.src = src;
- script.async = false;
- document.body.append(script);
- }
- // long.js 先執行，因為代碼中設置了 async=false
- loadScript("/article/script-async-defer/long.js");
- loadScript("/article/script-async-defer/small.js");
如果沒有 script.async=false，腳本則將以默認規則執行，即加載優先順序（small.js 大概會先執行）。
同樣，和 defer 一樣，如果我們要加載一個庫和一個依賴于它的腳本，那么順序就很重要。
總結
async 和 defer 有一個共同點：加載這樣的腳本都不會阻塞頁面的渲染。因此，用戶可以立即閱讀并了解頁面內容。
但是，它們之間也存在一些本質的區別：
| 順序 | DOMContentLoaded |
|
|---|---|---|
async |
加載優先順序。腳本在文檔中的順序不重要 —— 先加載完成的先執行 | 不相關。可能在文檔加載完成前加載并執行完畢。如果腳本很小或者來自于緩存，同時文檔足夠長，就會發生這種情況。 |
defer |
文檔順序（它們在文檔中的順序） | 在文檔加載和解析完成之后（如果需要，則會等待），即在 DOMContentLoaded 之前執行。 |
在這種情況下，某些圖形組件可能尚未初始化完成。
因此，請記得添加一個“正在加載”的提示，并禁用尚不可用的按鈕。以讓用戶可以清楚地看到，他現在可以在頁面上做什么，以及還有什么是正在準備中的。
現代 JavaScript 教程：開源的現代 JavaScript 從入門到進階的優質教程。React 官方文檔推薦，與 MDN 并列的 JavaScript 學習教程[1]。
在線免費閱讀：https://zh.javascript.info
參考資料
[1]
React 官方文檔推薦，與 MDN 并列的 JavaScript 學習教程: https://zh-hans.reactjs.org/docs/getting-started.html#javascript-resources
本文轉載自微信公眾號「技術漫談」，可以通過以下二維碼關注。轉載本文請聯系技術漫談公眾號。
