前端資源提示符

jialiangzai發表於2024-08-29

由於 js 是單執行緒,DOM 解析是自上而下的,遇到 link 或 script 標籤,去暫停主執行緒去下載資源,然後再繼續解析,主執行緒在等待網路執行緒下載的這個時間段就會造成浪費,而 HTML資源提示符 就能很好解決這個問題。
async

非同步下載 js 資源,不會阻止 DOM 解析,會在下載完成後立即執行 js 指令碼

defer

非同步下載 js 資源,不會阻止 DOM 解析,在 DOM 解析完後才執行 js 指令碼,js 檔案會在 DOMContentLoaded 事件呼叫前執行。
如果有多個設定了 defer 的 script 標籤存在,則會按照順序執行所有的 script。
如果 async 和 defer 同時存在,async 優先順序更高。

preload

預載入,讓瀏覽器提前載入指定資源(載入後並不執行) ,需要執行時再執行,一旦啟用後便會告知瀏覽器應該儘快的載入某個資源,如果提取的資源3s內未在當前使用,在谷歌開發工具將會觸發警告訊息。

prefetch

告訴瀏覽器,這個資源將會在未來的某個時刻用到,瀏覽器會在空閒時下載它

module

可以做瀏覽器相容,一般高版本的瀏覽器才會載入 type=module 檔案

相關文章