建站
咨詢
售后
建站咨詢
新聞中心
腳本：async，defer
創(chuàng)新互聯(lián)是專業(yè)的冷水灘網(wǎng)站建設(shè)公司，冷水灘接單;提供做網(wǎng)站、網(wǎng)站設(shè)計,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行冷水灘網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!
現(xiàn)代的網(wǎng)站中，腳本往往比 HTML 更“重”：它們的大小通常更大，處理時間也更長。
當(dāng)瀏覽器加載 HTML 時遇到 標簽，瀏覽器就不能繼續(xù)構(gòu)建 DOM。它必須立刻執(zhí)行此腳本。對于外部腳本 也是一樣的：瀏覽器必須等腳本下載完，并執(zhí)行結(jié)束，之后才能繼續(xù)處理剩余的頁面。
這會導(dǎo)致兩個重要的問題：
- 腳本不能訪問到位于它們下面的 DOM 元素，因此，腳本無法給它們添加處理程序等。
- 如果頁面頂部有一個笨重的腳本，它會“阻塞頁面”。在該腳本下載并執(zhí)行結(jié)束前，用戶都不能看到頁面內(nèi)容：
...content before script...
...content after script...
這里有一些解決辦法。例如，我們可以把腳本放在頁面底部。此時，它可以訪問到它上面的元素，并且不會阻塞頁面顯示內(nèi)容：
- ...all content is above the script...
但是這種解決方案遠非完美。例如，瀏覽器只有在下載了完整的 HTML 文檔之后才會注意到該腳本(并且可以開始下載它)。對于長的 HTML 文檔來說，這樣可能會造成明顯的延遲。
這對于使用高速連接的人來說，這不值一提，他們不會感受到這種延遲。但是這個世界上仍然有很多地區(qū)的人們所使用的網(wǎng)絡(luò)速度很慢，并且使用的是遠非完美的移動互聯(lián)網(wǎng)連接。
幸運的是，這里有兩個
...content after script...
換句話說：
- 具有 defer 特性的腳本不會阻塞頁面。
- 具有 defer 特性的腳本總是要等到 DOM 解析完畢，但在 DOMContentLoaded 事件之前執(zhí)行。
下面這個示例演示了上面所說的第二句話：
...content before scripts...
...content after scripts...
- 頁面內(nèi)容立即顯示。
- DOMContentLoaded 事件處理程序等待具有 defer 特性的腳本執(zhí)行完成。它僅在腳本下載且執(zhí)行結(jié)束后才會被觸發(fā)。
具有 defer 特性的腳本保持其相對順序，就像常規(guī)腳本一樣。
假設(shè)，我們有兩個具有 defer 特性的腳本：long.js 在前，small.js 在后。
瀏覽器掃描頁面尋找腳本，然后并行下載它們，以提高性能。因此，在上面的示例中，兩個腳本是并行下載的。small.js 可能會先下載完成。
……但是，defer 特性除了告訴瀏覽器“不要阻塞頁面”之外，還可以確保腳本執(zhí)行的相對順序。因此，即使 small.js 先加載完成，它也需要等到 long.js 執(zhí)行結(jié)束才會被執(zhí)行。
當(dāng)我們需要先加載 JavaScript 庫，然后再加載依賴于它的腳本時，這可能會很有用。
defer 特性僅適用于外部腳本
如果
...content after scripts...
- 頁面內(nèi)容立刻顯示出來：加載寫有 async 的腳本不會阻塞頁面渲染。
- DOMContentLoaded 可能在 async 之前或之后觸發(fā)，不能保證誰先誰后。
- 較小的腳本 small.js 排在第二位，但可能會比 long.js 這個長腳本先加載完成，所以 small.js 會先執(zhí)行。雖然，可能是 long.js 先加載完成，如果它被緩存了的話，那么它就會先執(zhí)行。換句話說，異步腳本以“加載優(yōu)先”的順序執(zhí)行。
當(dāng)我們將獨立的第三方腳本集成到頁面時，此時采用異步加載方式是非常棒的：計數(shù)器，廣告等，因為它們不依賴于我們的腳本，我們的腳本也不應(yīng)該等待它們：
動態(tài)腳本
此外，還有一種向頁面添加腳本的重要的方式。
我們可以使用 JavaScript 動態(tài)地創(chuàng)建一個腳本，并將其附加（append）到文檔（document）中：
- let script = document.createElement('script');
- script.src = "/article/script-async-defer/long.js";
- document.body.append(script); // (*)
當(dāng)腳本被附加到文檔 (*) 時，腳本就會立即開始加載。
默認情況下，動態(tài)腳本的行為是“異步”的。
也就是說：
- 它們不會等待任何東西，也沒有什么東西會等它們。
- 先加載完成的腳本先執(zhí)行（“加載優(yōu)先”順序）。
如果我們顯式地設(shè)置了 script.async=false，則可以改變這個規(guī)則。然后腳本將按照腳本在文檔中的順序執(zhí)行，就像 defer 那樣。
在下面這個例子中，loadScript(src) 函數(shù)添加了一個腳本，并將 async 設(shè)置為了 false。
因此，long.js 總是會先執(zhí)行（因為它是先被添加到文檔的）：
- function loadScript(src) {
- let script = document.createElement('script');
- script.src = src;
- script.async = false;
- document.body.append(script);
- }
- // long.js 先執(zhí)行，因為代碼中設(shè)置了 async=false
- loadScript("/article/script-async-defer/long.js");
- loadScript("/article/script-async-defer/small.js");
如果沒有 script.async=false，腳本則將以默認規(guī)則執(zhí)行，即加載優(yōu)先順序（small.js 大概會先執(zhí)行）。
同樣，和 defer 一樣，如果我們要加載一個庫和一個依賴于它的腳本，那么順序就很重要。
總結(jié)
async 和 defer 有一個共同點：加載這樣的腳本都不會阻塞頁面的渲染。因此，用戶可以立即閱讀并了解頁面內(nèi)容。
但是，它們之間也存在一些本質(zhì)的區(qū)別：
| 順序 | DOMContentLoaded |
|
|---|---|---|
async | 加載優(yōu)先順序。腳本在文檔中的順序不重要 —— 先加載完成的先執(zhí)行 | 不相關(guān)?？赡茉谖臋n加載完成前加載并執(zhí)行完畢。如果腳本很小或者來自于緩存，同時文檔足夠長，就會發(fā)生這種情況。 |
defer | 文檔順序（它們在文檔中的順序） | 在文檔加載和解析完成之后（如果需要，則會等待），即在 DOMContentLoaded 之前執(zhí)行。 |
在這種情況下，某些圖形組件可能尚未初始化完成。
因此，請記得添加一個“正在加載”的提示，并禁用尚不可用的按鈕。以讓用戶可以清楚地看到，他現(xiàn)在可以在頁面上做什么，以及還有什么是正在準備中的。
現(xiàn)代 JavaScript 教程：開源的現(xiàn)代 JavaScript 從入門到進階的優(yōu)質(zhì)教程。React 官方文檔推薦，與 MDN 并列的 JavaScript 學(xué)習(xí)教程[1]。
在線免費閱讀：https://zh.javascript.info
參考資料
[1]
React 官方文檔推薦，與 MDN 并列的 JavaScript 學(xué)習(xí)教程: https://zh-hans.reactjs.org/docs/getting-started.html#javascript-resources
本文轉(zhuǎn)載自微信公眾號「技術(shù)漫談」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系技術(shù)漫談公眾號。
新聞標題：學(xué)習(xí)Async，Defer和動態(tài)腳本，本文就夠了！
當(dāng)前地址：http://m.5511xx.com/article/cosicce.html
