為了優化我們公司網站的性能,我最近引入了瀏覽器預載入技術(Preload)。 這項技術可以顯著減少級聯情況,提高資源載入的並行度,從而加速網站的載入速度。 Preload的原理 Preload的原理是在瀏覽器解析HTML文檔時,提前載入頁面所需的關鍵資源,如樣式表、腳本文件和字體等。 通過預載入這些 ...
為了優化我們公司網站的性能,我最近引入了瀏覽器預載入技術(Preload)。
這項技術可以顯著減少級聯情況,提高資源載入的並行度,從而加速網站的載入速度。
Preload的原理
Preload的原理是在瀏覽器解析HTML文檔時,提前載入頁面所需的關鍵資源,如樣式表、腳本文件和字體等。
通過預載入這些關鍵資源,瀏覽器能夠在頁面載入時更快地獲取所需資源,從而加速頁面的渲染過程。下麵是一個簡單的預載入示例代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Optimized Website with Preload</title> <!-- Preload CSS --> <link rel="preload" href="styles.css" as="style"> <!-- Preload JavaScript --> <link rel="preload" href="script.js" as="script"> <!-- Preload font --> <link rel="preload" href="font.woff2" as="font" type="font/woff2"> <!-- Normal CSS --> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- Content of the webpage --> <!-- Normal JavaScript --> <script src="script.js"></script> </body> </html>
crossorigin屬性和as屬性的可選值
crossorigin屬性:該屬性用於指定資源的跨域設置。可選值包括:
- anonymous:表示資源會以匿名身份請求,不會包含憑據信息(如 cookies、HTTP 認證等)。通常用於不需要用戶身份驗證的公共資源。
- use-credentials:表示資源會以憑據身份請求,瀏覽器會發送包含憑據信息的請求。適用於需要用戶身份驗證的私有資源。
as屬性:該屬性用於指定資源的類型。可選值包括:
- audio:音頻文件
- document:HTML 文檔
- font:字體文件
- image:圖像文件
- script:JavaScript 文件
- style:樣式表文件
- video:視頻文件
- fetch:其他類型的網路請求
正確屬性的重要性
如果設置錯誤的crossorigin和as屬性,將導致預載入失效。
例如,如果預載入的資源是跨域的而沒有設置正確的crossorigin,瀏覽器可能會拒絕載入該資源。
同樣,如果as屬性設置錯誤,告訴瀏覽器預載入的資源類型與實際類型不符,也會導致預載入失效。
效果
下麵是優化前後的對比,可以看到優化後的並行度提升了很多