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

Published: at 03:12 AM (2 min read)

HTML5 在

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

網頁正常載入的順序：

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

從以上流程我們也可以發現，為什麼有人常說若是需要等 dom 載入完成才能執行的

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

  1. async 在背景下載 script(不暫停 HTML 的繪製)，且下載完即執行。(無法保證每個 script 執行的優先順序)

  2. defer 在背景下載 script(不暫停 HTML 的繪製)，下載完後直到 DomContentLoaded 才執行。ps. 以上兩個可以參考時序圖

  3. integrity 目前僅 chrome、firefox 及 opera 有支援，用來檢驗載入的 script 是否經過第三方竄改。 為安全性作提升。(integrity=“[hash]-[value]”) 如：

    [code]

參考資料：

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