我對JS延遲非同步指令碼的思考

Peter譚金傑發表於2020-10-09
JS非同步指令碼

關於對延遲指令碼的思考

  • async和defer屬性的指令碼，相信大家都聽說過，但是他的真正執行細節是什麼樣子的？很少有文章認真研究它,可能不太有人注重細節,但其實真正有技術含量的工作和專案,對於效能要求極高,那麼細節就很重要了.需要不斷的實驗自我嘗試
  • 最近幾個月，我一直在研究一些技術，例如linux,作業系統,演算法等,預計要持續學習到今年年底。紅寶書第四版出來後，我也是花了很多時間去看。對於延遲指令碼，自己也是做了一個實驗，寫下了這篇總結

什麼是延遲指令碼？

  • script標籤，帶async和defer屬性等，通過document.createElement('script')建立並且沒有指定script.async=false的指令碼預設為非同步延遲指令碼（必須為非內聯指令碼）,如下所示：
<!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建立的標籤插入預設為async模式

開始實驗

image.png

  • 我一共寫了2個async和2個defer標籤,其它的都是普通標籤.其中async1.js裡面有4000行程式碼,其它都是一個console.log而已
  • 第一次實驗結果:

image.png

  • 再次重新整理頁面（注意我已經禁用了瀏覽器快取）,結果為：

image.png

  • 再次重新整理,發現async執行時機和順序不確定

image.png

原因在於:async是告訴瀏覽器,可以不必等到它下載解析完後再載入頁面,也不用等它執行完後再執行其他指令碼,俗稱非同步執行指令碼

看下載執行時機和列印結果的對比

  • 列印結果:

    image.png

  • 對應的下載執行時機

image.png

  • 從上面看，下載時機async和普通模式都是同樣並行下載,只有defer是最後才下載(http1.1有併發數量限制,可是這裡並不是併發限制，當我刪除common的引用後,我發現defer永遠都是最後下載的)

    image.png

  • async和defer兩種模式，區別在於:

    • async是告訴瀏覽器,它不會操作dom,可以不必等到它下載解析完後再載入頁面,也不用等它執行完後再執行其他指令碼,俗稱非同步執行指令碼, 多個async無法保證他們的執行順序,例如async1和async2無法按順序執行
    • defer是在解析到結束到</html>標籤後才會執行,俗稱推遲執行指令碼,多個defer可以按順序執行,例如defer1和defer2可以按順序執行(實際上也不保證順序執行)
    • 解析到script標籤後,async是直接下載
    • 解析到script標籤後,defer是最後下載

  • 相同點:

    • 多個async或者defer標籤實際上都不能保證順序執行
    • 都不會阻塞解析其他script標籤內容的解析和頁面渲染
    • 他們都會在瀏覽器load事件前執行，但是不保證是在DomContentLoad事件前還是後執行
    • defer不一定在async後面執行，從我的實驗結果和書上對它們對解析來看

影響多個非同步指令碼的執行順序因素

  • 指令碼檔案大小
  • 網路傳輸因素

特殊情況

  • 當所有的指令碼檔案都很小很小的時候,結果會在很大概率穩定在

image.png

使用的注意點

  • 非同步推遲指令碼的執行順序並不穩定,所有儘量只有一個
  • 使用非同步推遲指令碼時,應該考慮什麼場景才使用,而不是濫用它

寫在最後

  • 紙上得來終覺淺,欲知此事要躬行,我寫得也不一定對,如果你有問題或者更好的答案可以在下面參與討論,我始終認為有爭議和反對的聲音是好事
  • 另外你如果覺得寫得不錯對你有幫助,可以幫忙點個在看/贊/關注.
  • 關注前端巔峰公眾號後回覆：加群,即可加群獲取3800G免費前端學習視訊資源

相關文章