快捷導(dǎo)航

關(guān)于Javascript中defer和async的區(qū)別總結(jié)

更新時間：2016年09月20日 09:52:27 作者：Simple__Happiness

相信看過javascript高級程序設(shè)計的人，在javascript高級程序設(shè)計里，應(yīng)該看到了介紹了有關(guān)defer和async的區(qū)別，可是比較淺顯，而且也說得不是很清楚。下面我們來通過這篇文章來詳細(xì)了解下dfer和async的區(qū)別。

首先來看看這三句話：

<script src="script.js"></script>

沒有 defer 或 async，瀏覽器會立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該 script 標(biāo)簽之下的文檔元素之前，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行。

<script async src="script.js"></script>

有 async，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）。

<script defer src="myscript.js"></script>

有 defer，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進(jìn)行（異步），但是 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。

下面來進(jìn)行詳解的介紹這二者的區(qū)別。

一般情況

按照慣例，所有script元素都應(yīng)該放在頁面的head元素中。這種做法的目的就是把所有外部文件(CSS文件和JavaScript文件)的引用都放在相同的地方?？墒牵谖臋n的head元素中包含所有JavaScript文件，意味著必須等到全部JavaScript代碼都被下載、解析和執(zhí)行完成以后，才能開始呈現(xiàn)頁面的內(nèi)容(瀏覽器在遇到body標(biāo)簽時才開始呈現(xiàn)內(nèi)容)。

對于那些需要很多JavaScript代碼的頁面來說，這無疑會導(dǎo)致瀏覽器在呈現(xiàn)頁面時出現(xiàn)明顯的延遲，而延遲期間的瀏覽器窗口中將是一片空白。為了避免這個問題，現(xiàn)在Web應(yīng)用程序一般都全部JavaScript引用放在body元素中頁面的內(nèi)容后面。這樣一來，在解析包含的JavaScript代碼之前，頁面的內(nèi)容將完全呈現(xiàn)在瀏覽器中。而用戶也會因為瀏覽器窗口顯示空白頁面的時間縮短而感到打開頁面的速度加快了。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title></title>
</head>
<body>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

defer (延遲腳本)

延遲腳本：defer屬性只適用于外部腳本文件。

如果給script標(biāo)簽定義了defer屬性，這個屬性的作用是表明腳本在執(zhí)行時不會影響頁面的構(gòu)造。也就是說，腳本會被延遲到整個頁面都解析完畢后再運行。因此，如果script元素中設(shè)置了defer屬性，相當(dāng)于告訴瀏覽器立即下載，但延遲執(zhí)行。

示例：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>延遲加載</title>
 <script defer type="text/javascript" src="test.js"></script>
</head>
<body>
</body>
</html>

這個例子中，雖然我們把script元素放在了文檔的head元素中，但其中包含的腳本將延遲到瀏覽器遇到</html>標(biāo)簽后再執(zhí)行。
HTML5規(guī)范要求腳本按照它們出現(xiàn)的先后順序執(zhí)行，因此第一個延遲腳本會先于第二個延遲腳本執(zhí)行，而這兩個腳本會先于DOMContentLoaded事件(在DOM樹構(gòu)建完成后觸發(fā)，不需要等到所有的資源都加載完畢)執(zhí)行。

特別注意：在現(xiàn)實當(dāng)中，延遲腳本并不一定會按照順序執(zhí)行，也不一定會在DOMContentLoaded事件觸發(fā)前執(zhí)行，因此最好只包含一個延遲腳本。

有 defer，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進(jìn)行（異步），但是 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。

最佳實踐

從實用角度來說，把所有腳本都放在 </body> 之前是最佳實踐，因為對于舊瀏覽器來說這是唯一的優(yōu)化選擇，此法可保證非腳本的其他一切元素能夠以最快的速度得到加載和解析。

**注意：**defer屬性在瀏覽器之間表現(xiàn)并不一致。為了避免跨瀏覽器的差異，可以使用 “l(fā)azy loading”的方法，即直到用到該腳本時才加載。

function lazyload() {
 var elem = document.createElement("script");
 elem.type = "text/javascript";
 elem.async = true;
 elem.src = "script.js"; 
 document.body.appendChild(elem);
}

if (window.addEventListener) {
 window.addEventListener("load", lazyload, false);
} else if (window.attachEvent) {
 window.attachEvent("onload", lazyload);
} else {
 window.onload = lazyload;
}

async(異步腳本)

異步腳本：async屬性也只適用于外部腳本文件，并告訴瀏覽器立即下載文件。

但與defer不同的是：標(biāo)記為async的腳本并不保證按照指定它們的先后順序執(zhí)行。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>異步加載</title>
 <script async type="text/javascript" src="test1.js"></script>
 <script async type="text/javascript" src="test2.js"></script>
</head>
<body>
</body>
</html>

這個例子中，test2.js可能會在test1.js之前執(zhí)行。因此，確保兩者之間互不一來非常重要。指定async屬性的目的是不讓頁面等待兩個腳本下載和執(zhí)行，從而異步加載頁面其他內(nèi)容。因此，建議異步腳本不要在加載期間修改DOM。

來看一張更加清晰的圖：

圖解：藍(lán)色線代表網(wǎng)絡(luò)讀取，紅色線代表執(zhí)行時間，這兩個都是針對腳本的；綠色線代表 HTML 解析。

通過上圖和之前的分析，我們可以得出：

1、defer 和 async 在網(wǎng)絡(luò)讀取（腳本下載）這塊兒是一樣的，都是異步的（相較于 HTML 解析）

2、兩者的差別：在于腳本下載完之后何時執(zhí)行，顯然 defer 是最接近我們對于應(yīng)用腳本加載和執(zhí)行的要求的。defer是立即下載但延遲執(zhí)行，加載后續(xù)文檔元素的過程將和腳本的加載并行進(jìn)行（異步），但是腳本的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。async是立即下載并執(zhí)行，加載和渲染后續(xù)文檔元素的過程將和js腳本的加載與執(zhí)行并行進(jìn)行（異步）。

3、關(guān)于 defer，我們還要記住的是它是按照加載順序執(zhí)行腳本的

4、標(biāo)記為async的腳本并不保證按照指定它們的先后順序執(zhí)行。對它來說腳本的加載和執(zhí)行是緊緊挨著的，所以不管你聲明的順序如何，只要它加載完了就會立刻執(zhí)行。

5、async 對于應(yīng)用腳本的用處不大，因為它完全不考慮依賴（哪怕是最低級的順序執(zhí)行），不過它對于那些可以不依賴任何腳本或不被任何腳本依賴的腳本來說卻是非常合適的。

總結(jié)

以上就是關(guān)于js中defer和async區(qū)別的全部內(nèi)容，文章介紹的很詳細(xì)，希望能對大家的學(xué)習(xí)或者工作帶來一定的幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章: