現(xiàn)代的網(wǎng)站中鲸睛，腳本往往比 HTML 更“重”：它們的大小通常更大娜饵，處理時(shí)間也更長(zhǎng)。
當(dāng)瀏覽器加載 HTML 時(shí)遇到 <script>...</script> 標(biāo)簽官辈，瀏覽器就不能繼續(xù)構(gòu)建 DOM箱舞。它必須立刻執(zhí)行此腳本。對(duì)于外部腳本 <script src="..."></script> 也是一樣的：瀏覽器必須等腳本下載完拳亿，并執(zhí)行結(jié)束晴股，之后才能繼續(xù)處理剩余的頁(yè)面。
這會(huì)導(dǎo)致兩個(gè)重要的問(wèn)題：
- 腳本不能訪問(wèn)到位于它們下面的 DOM 元素肺魁，因此电湘，腳本無(wú)法給它們添加處理程序等。
- 如果頁(yè)面頂部有一個(gè)笨重的腳本，它會(huì)“阻塞頁(yè)面”胡桨。在該腳本下載并執(zhí)行結(jié)束前枝缔，用戶都不能看到頁(yè)面內(nèi)容：
<p>...content before script...</p>
<script src="[https://javascript.info/article/script-async-defer/long.js?speed=1](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>
這里有一些解決辦法。例如训唱，我們可以把腳本放在頁(yè)面底部鸽斟。此時(shí)，它可以訪問(wèn)到它上面的元素呢诬，并且不會(huì)阻塞頁(yè)面顯示內(nèi)容：
<body> ...all content is above the script...
<script src="[https://javascript.info/article/script-async-defer/long.js?speed=1](https://javascript.info/article/script-async-defer/long.js?speed=1)"></script>
</body>
但是這種解決方案遠(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è) <script> 特性（attribute）可以為我們解決這個(gè)問(wèn)題：defer 和 async缸剪。
defer
defer 特性告訴瀏覽器不要等待腳本吗铐。相反，瀏覽器將繼續(xù)處理 HTML杏节，構(gòu)建 DOM唬渗。腳本會(huì)“在后臺(tái)”下載，然后等 DOM 構(gòu)建完成后奋渔，腳本才會(huì)執(zhí)行镊逝。
這是與上面那個(gè)相同的示例，但是帶有 defer 特性：
<p>...content before script...</p>
<script defer src="[https://javascript.info/article/script-async-defer/long.js?speed=1](https://javascript.info/article/script-async-defer/long.js?speed=1)"></script>
<!-- 立即可見(jiàn) -->
<p>...content after script...</p>
換句話說(shuō)：
- 具有
defer特性的腳本不會(huì)阻塞頁(yè)面卒稳。 - 具有
defer特性的腳本總是要等到 DOM 解析完畢蹋半，但在DOMContentLoaded事件之前執(zhí)行。
下面這個(gè)示例演示了上面所說(shuō)的第二句話：
<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](https://javascript.info/article/script-async-defer/long.js?speed=1)">
</script>
<p>...content after scripts...</p>
- 頁(yè)面內(nèi)容立即顯示充坑。
-
DOMContentLoaded事件處理程序等待具有defer特性的腳本執(zhí)行完成减江。它僅在腳本下載且執(zhí)行結(jié)束后才會(huì)被觸發(fā)。
具有 defer 特性的腳本保持其相對(duì)順序捻爷，就像常規(guī)腳本一樣辈灼。
假設(shè)，我們有兩個(gè)具有 defer 特性的腳本：long.js 在前也榄，small.js 在后巡莹。
<script defer src="[https://javascript.info/article/script-async-defer/long.js](https://javascript.info/article/script-async-defer/long.js)"></script>
<script defer src="[https://javascript.info/article/script-async-defer/small.js](https://javascript.info/article/script-async-defer/small.js)"></script>
瀏覽器掃描頁(yè)面尋找腳本司志，然后并行下載它們，以提高性能降宅。因此骂远，在上面的示例中，兩個(gè)腳本是并行下載的腰根。small.js 可能會(huì)先下載完成激才。
……但是，defer 特性除了告訴瀏覽器“不要阻塞頁(yè)面”之外额嘿，還可以確保腳本執(zhí)行的相對(duì)順序瘸恼。因此，即使 small.js 先加載完成册养，它也需要等到 long.js 執(zhí)行結(jié)束才會(huì)被執(zhí)行东帅。
當(dāng)我們需要先加載 JavaScript 庫(kù)，然后再加載依賴于它的腳本時(shí)球拦，這可能會(huì)很有用靠闭。
defer 特性僅適用于外部腳本
如果 <script> 腳本沒(méi)有 src，則會(huì)忽略 defer 特性刘莹。
async
async 特性與 defer 有些類似阎毅。它也能夠讓腳本不阻塞頁(yè)面焚刚。但是点弯，在行為上二者有著重要的區(qū)別。
async 特性意味著腳本是完全獨(dú)立的：
- 瀏覽器不會(huì)因
async腳本而阻塞（與defer類似）矿咕。 - 其他腳本不會(huì)等待
async腳本加載完成抢肛，同樣，async腳本也不會(huì)等待其他腳本碳柱。 -
DOMContentLoaded和異步腳本不會(huì)彼此等待：-
DOMContentLoaded可能會(huì)發(fā)生在異步腳本之前（如果異步腳本在頁(yè)面完成后才加載完成） -
DOMContentLoaded也可能發(fā)生在異步腳本之后（如果異步腳本很短捡絮，或者是從 HTTP 緩存中加載的）
-
換句話說(shuō)，async 腳本會(huì)在后臺(tái)加載莲镣，并在加載就緒時(shí)運(yùn)行福稳。DOM 和其他腳本不會(huì)等待它們，它們也不會(huì)等待其它的東西瑞侮。async 腳本就是一個(gè)會(huì)在加載完成時(shí)執(zhí)行的完全獨(dú)立的腳本的圆。就這么簡(jiǎn)單，現(xiàn)在明白了吧半火？
下面是一個(gè)類似于我們?cè)谥v defer 時(shí)所看到的例子：long.js 和 small.js 兩個(gè)腳本越妈，只是現(xiàn)在 defer 變成了 async。
它們不會(huì)等待對(duì)方钮糖。先加載完成的（可能是 small.js）—— 先執(zhí)行：
<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](https://javascript.info/article/script-async-defer/long.js)"></script>
<script async src="[https://javascript.info/article/script-async-defer/small.js](https://javascript.info/article/script-async-defer/small.js)"></script>
<p>...content after scripts...</p>
- 頁(yè)面內(nèi)容立刻顯示出來(lái)：加載寫有
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)該等待它們：
<!-- Google Analytics 腳本通常是這樣嵌入頁(yè)面的 -->
<script async src="[https://google-analytics.com/analytics.js](https://google-analytics.com/analytics.js)"></script>
此外毡代，還有一種向頁(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)溉痢。可能在文檔加載完成前加載并執(zhí)行完畢憋他。如果腳本很小或者來(lái)自于緩存孩饼，同時(shí)文檔足夠長(zhǎng)，就會(huì)發(fā)生這種情況竹挡。 |
defer |
文檔順序（它們?cè)谖臋n中的順序） | 在文檔加載和解析完成之后（如果需要镀娶，則會(huì)等待），即在 DOMContentLoaded 之前執(zhí)行揪罕。 |
在實(shí)際開(kāi)發(fā)中梯码，defer 用于需要整個(gè) DOM 的腳本，和/或腳本的相對(duì)執(zhí)行順序很重要的時(shí)候好啰。
async 用于獨(dú)立腳本轩娶，例如計(jì)數(shù)器或廣告，這些腳本的相對(duì)執(zhí)行順序無(wú)關(guān)緊要框往。
沒(méi)有腳本的頁(yè)面應(yīng)該也是可用的
請(qǐng)注意：如果你使用的是 defer 或 async鳄抒，那么用于將在腳本加載完成 之前 先看到頁(yè)面。
在這種情況下搅窿，某些圖形組件可能尚未初始化完成嘁酿。
因此，請(qǐng)記得添加一個(gè)“正在加載”的提示男应，并禁用尚不可用的按鈕。以讓用戶可以清楚地看到娱仔，他現(xiàn)在可以在頁(yè)面上做什么沐飘，以及還有什么是正在準(zhǔn)備中的。
