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