|
|
在 Chrome 中觸發控制台警告。Preload 與 prefetch 類似，本質差異在於：預先載入是一種聲明性獲取，它允許您強制瀏覽器發出資源請求，而不會阻止文件載入事件。預取是向瀏覽器暗示可能需要資源，但將是否以及何時加載資源的決定委託給瀏覽器是一個好主意。實際用例預先載入 CSS 文件如果您使用關鍵 CSS 方法，請將 CSS 分成兩部分。渲染首屏內容所需的關鍵 CSS內聯在 HTML 文件的 <head> 部分中，非關鍵 CSS 通常使用 JavaScript進行延遲載入。
在載入非關鍵 CSS 之前等待 JavaScript 運行可能會導 斯洛文尼亚电话号码列表 致使用者捲動時出現渲染延遲，因此最好先使用 <link rel=”preload”> 開始下載。預先載入 JavaScript 文件由於瀏覽器不運行預先載入的文件，因此預先載入對於將獲取與執行分開非常有用，這可以改進諸如交互時間之類的指標。如果您拆分 JavaScript 套件並僅預先載入關鍵區塊，則預先載入效果最佳。啟動伺服器推送的指示Nginx 現在支援Server Push，這是 HTTP/2 協定引入的功能，如果預先載入資源的連結出現在 HTTP 標頭中，則可以啟動該功能。關於伺服器推送的討論相當長，因此如果您想了解更多信息，我建議您閱讀剛剛連結的頁面。如何實現rel=preload實現預先載入的最簡單方法是在 HTML 文件的 <head> 部分中添加 <link> 標記
提供as屬性有助於瀏覽器根據預先載入資源的類型確定其優先權，設定正確的標頭，並確定該資源是否已存在於快取中。此屬性可接受的值包括：腳本、樣式、字體、圖像等。注意：省略as屬性或輸入無效值相當於 XHR 請求，瀏覽器不知道它正在檢索什麼，因此無法確定正確的優先順序。它還可能導致某些資源（例如腳本）的雙重獲取。
某些類型的資源（例如字體）是匿名上傳的。對於那些你需要設定預先載入的 crossorigin 屬性：
警告：沒有 crossorigin 屬性的預先載入字體將被提取兩次！<link> 元素也接受type屬性，其中包含連結資源的 MIME 類型。瀏覽器使用 type 屬性值來確保僅當資源的檔案類型受支援時才預先載入資源。如果瀏覽器不支援指定的資源類型，它將忽略<link rel=”preload”>。您也可以透過HTTP Link 標頭預先載入任何類型的資源
標頭中指定預取的一個優點是瀏覽器不需要解析文件來發現它，這在某些情況下可以提供小的改進。
|
|
发表于 2023-9-20 12:53:11