[HTML] script 資源載入,async、defer 與 integrity

HTML5 在 <script> 標籤中新增了幾個幫助載入外部 js 資源的屬性。

首先,先來看一下 DomContentLoaded 與 load 事件

網頁正常載入的順序:

  1. 解析 HTML 結構
  2. 載入解析外部 stylesheet 或 js 資源。
  3. 執行載入的 script (注意:此時會暫停 HTML 的繪製)
  4. HTML dom 載入完成 ( DomContentLoaded,JQuery 的 ready )
  5. 載入剩餘的 stylesheet 與圖片或 frame
  6. 全部資源與頁面載入完畢 ( load )

從以上流程我們也可以發現,為什麼有人常說若是需要等 dom 載入完成才能執行的 <script> 標籤,放在body 底下可以增進網頁的載入速度。

有了初步流程的認識,接下來說說 HTML5 在 <script> 幾個新增的屬性~

  1. async
    在背景下載 script(不暫停 HTML 的繪製),且下載完即執行。(無法保證每個 script 執行的優先順序)
  2. defer
    在背景下載 script(不暫停 HTML 的繪製),下載完後直到 DomContentLoaded 才執行。ps. 以上兩個可以參考時序圖
  3. integrity
    目前僅 chrome、firefox 及 opera 有支援,用來檢驗載入的 script 是否經過第三方竄改。
    為安全性作提升。(integrity=”[hash]-[value]”)
    如:

    <script integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS">
    

參考資料:

http://blog.xuite.net/vexed/tech/61308318-script+tag+%E5%B1%AC%E6%80%A7+async+defer+%E5%B7%AE%E5%88%A5

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

Leave a Reply