前端最佳化 之 preload

chester·chen發表於2024-03-22
前端

為了最佳化我們公司網站的效能，我最近引入了瀏覽器預載入技術（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屬性設定錯誤，告訴瀏覽器預載入的資源型別與實際型別不符，也會導致預載入失效。

效果

下面是最佳化前後的對比，可以看到最佳化後的並行度提升了很多

相關文章