溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

什么是JS延遲異步腳本

發(fā)布時間：2021-10-26 15:50:02 來源：億速云 閱讀：178 作者：iii 欄目：web開發(fā)

這篇文章主要講解了“什么是JS延遲異步腳本”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“什么是JS延遲異步腳本”吧！

什么是延遲腳本？

  • script標(biāo)簽，帶async和defer屬性等，通過document.createElement('script')創(chuàng)建并且沒有指定script.async=false的腳本默認(rèn)為異步延遲腳本（必須為非內(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)簽插入默認(rèn)為async模式
開始實驗

什么是JS延遲異步腳本

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

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

什么是JS延遲異步腳本

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

什么是JS延遲異步腳本

  • 再次刷新,發(fā)現(xiàn)async執(zhí)行時機和順序不確定

什么是JS延遲異步腳本

原因在于:async是告訴瀏覽器,可以不必等到它下載解析完后再加載頁面,也不用等它執(zhí)行完后再執(zhí)行其他腳本,俗稱異步執(zhí)行腳本
看下載執(zhí)行時機和打印結(jié)果的對比

  • 打印結(jié)果:

    什么是JS延遲異步腳本

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

什么是JS延遲異步腳本

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

    什么是JS延遲異步腳本

  • 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是最后下載

  • 相同點:

    • 多個async或者defer標(biāo)簽實際上都不能保證順序執(zhí)行

    • 都不會阻塞解析其他script標(biāo)簽內(nèi)容的解析和頁面渲染

    • 他們都會在瀏覽器load事件前執(zhí)行，但是不保證是在DomContentLoad事件前還是后執(zhí)行

    • defer不一定在async后面執(zhí)行，從我的實驗結(jié)果和書上對它們對解析來看

影響多個異步腳本的執(zhí)行順序因素

  • 腳本文件大小

  • 網(wǎng)絡(luò)傳輸因素

特殊情況

  • 當(dāng)所有的腳本文件都很小很小的時候,結(jié)果會在很大概率穩(wěn)定在

什么是JS延遲異步腳本

使用的注意點

  • 異步推遲腳本的執(zhí)行順序并不穩(wěn)定,所有盡量只有一個

  • 使用異步推遲腳本時,應(yīng)該考慮什么場景才使用,而不是濫用它

感謝各位的閱讀，以上就是“什么是JS延遲異步腳本”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對什么是JS延遲異步腳本這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手