Skip to content

[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