快捷導(dǎo)航

淺析我對JS延遲異步腳本的思考

更新時間：2020年10月12日 10:40:43 作者：Peter譚老師

這篇文章主要介紹了淺析我對JS延遲異步腳本的思考,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

關(guān)于對延遲腳本的思考

async和defer屬性的腳本，相信大家都聽說過，但是他的真正執(zhí)行細節(jié)是什么樣子的？很少有文章認真研究它,可能不太有人注重細節(jié),但其實真正有技術(shù)含量的工作和項目,對于性能要求極高,那么細節(jié)就很重要了.需要不斷的實驗自我嘗試

最近幾個月，我一直在研究一些技術(shù)，例如linux,操作系統(tǒng),算法等,預(yù)計要持續(xù)學(xué)習(xí)到今年年底。紅寶書第四版出來后，我也是花了很多時間去看。對于延遲腳本，自己也是做了一個實驗，寫下了這篇總結(jié)

什么是延遲腳本？

script標(biāo)簽，帶async和defer屬性等，通過document.createElement('script')創(chuàng)建并且沒有指定script.async=false的腳本默認為異步延遲腳本（必須為非內(nèi)聯(lián)腳本）,如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>

<body>

</body>
<script src="./async1.js" async></script>
<script src="./async2.js" async></script>
<script src="./defer1.js" defer></script>
<script src="./defer2.js" defer></script>
<script src="./common1.js"></script>
<script src="./common2.js"></script>
<script src="./common3.js"></script>

</html>

以上7個腳本文件,其中common開頭為非異步延遲腳本,其余的都指定了延遲腳本的模式，分為async和defer兩種

通過document.createElement創(chuàng)建的標(biāo)簽插入默認為async模式

開始實驗

我一共寫了2個async和2個defer標(biāo)簽,其它的都是普通標(biāo)簽.其中async1.js里面有4000行代碼,其它都是一個console.log而已

第一次實驗結(jié)果:

再次刷新頁面（注意我已經(jīng)禁用了瀏覽器緩存）,結(jié)果為：

再次刷新,發(fā)現(xiàn)async執(zhí)行時機和順序不確定，但是能確定defer肯定在async之后執(zhí)行。

原因在于:async是告訴瀏覽器,可以不必等到它下載解析完后再加載頁面,也不用等它執(zhí)行完后再執(zhí)行其他腳本,俗稱異步執(zhí)行腳本

看下載執(zhí)行時機和打印結(jié)果的對比

打印結(jié)果:

對應(yīng)的下載執(zhí)行時機

從上面看，下載時機async和普通模式都是同樣并行下載,只有defer是最后才下載(http1.1有并發(fā)數(shù)量限制,可是這里并不是并發(fā)限制，當(dāng)我刪除common的引用后,我發(fā)現(xiàn)defer永遠都是最后下載的)

async和defer兩種模式，區(qū)別在于:

async是告訴瀏覽器,它不會操作dom,可以不必等到它下載解析完后再加載頁面,也不用等它執(zhí)行完后再執(zhí)行其他腳本,俗稱異步執(zhí)行腳本, 多個async無法保證他們的執(zhí)行順序,例如async1和async2無法按順序執(zhí)行
defer是在解析到結(jié)束到</html>標(biāo)簽后才會執(zhí)行,俗稱推遲執(zhí)行腳本,多個defer可以按順序執(zhí)行,例如defer1和defer2可以按順序執(zhí)行(實際上也不保證順序執(zhí)行)
解析到script標(biāo)簽后,async是直接下載
解析到script標(biāo)簽后,defer是最后下載

相同點: