為了優化我們公司網站的性能，我最近引入了瀏覽器預載入技術（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屬性設置錯誤，告訴瀏覽器預載入的資源類型與實際類型不符，也會導致預載入失效。
效果
下麵是優化前後的對比，可以看到優化後的並行度提升了很多
