懶載入

概述

隨著 Web 的發展，我們看到傳送給使用者的資源數量和大小急劇增加。在 2011 年到 2019 年之間，桌面裝置的平均資源重量從約 100KB 增加到約 400KB，而移動裝置的平均資源重量從約 50KB 增加到約 350KB。而桌面裝置的圖片尺寸從約 250KB 增加到約 900KB，移動裝置的圖片尺寸則從約 100KB 增加到約 850KB。

解決此問題的方法之一是透過延遲載入對首次渲染不重要的資源，來縮短關鍵渲染路徑的長度。一個實際的例子是，當您訪問一個電子商務網站的主頁時，其中包含指向購物車頁面/部分的連結，在您導航到那裡之前，購物車頁面的任何資源（如 JavaScript、CSS 和圖片）都不會被下載。

策略

延遲載入可以應用於多種資源，並可透過多種策略實現。

通用

程式碼分割

JavaScript、CSS 和 HTML 可以被分割成更小的塊。這使得能夠優先發送提供價值所需的最少程式碼，從而提高頁面載入時間。其餘部分可以按需載入。

• 入口點分割：按應用中的入口點分割程式碼
• 動態分割：在使用動態 import() 表示式的地方分割程式碼

JavaScript

指令碼型別模組

任何帶有 type="module" 的 script 標籤都被視為JavaScript 模組，並且預設會被延遲載入。

CSS

預設情況下，CSS 被視為渲染阻塞資源，因此在 CSSOM 構建完成之前，瀏覽器不會渲染任何已處理的內容。CSS 必須精簡，儘可能快速地交付，並且建議使用媒體型別和查詢來解除渲染阻塞。

<link href="style.css" rel="stylesheet" media="all" />
<link href="portrait.css" rel="stylesheet" media="(orientation:portrait)" />
<link href="print.css" rel="stylesheet" media="print" />

可以執行一些CSS 最佳化來實現這一點。

字型

預設情況下，字型請求會延遲到渲染樹構建完成後才進行，這可能導致文字渲染延遲。

可以透過使用 <link rel="preload">、CSS font-display 描述符以及字型載入 API 來覆蓋預設行為並預載入 Web 字型資源。

另請參閱：Element Link。

圖片和 iframe

很多時候，網頁包含許多圖片，這些圖片會消耗資料量並影響頁面載入速度。其中大部分圖片都處於螢幕外（非關鍵），需要使用者進行互動，例如滾動，才能檢視它們。

loading 屬性

可以在 <img> 元素上使用 loading 屬性，或者在 <iframe> 上使用 loading 屬性，來指示瀏覽器延遲載入螢幕外的圖片/iframe，直到使用者滾動到它們附近。這使得非關鍵資源僅在需要時載入，從而可能加快初始頁面載入速度並減少網路使用。

<img loading="lazy" src="image.jpg" alt="..." />
<iframe loading="lazy" src="video-player.html" title="..."></iframe>

當所有急切載入的內容都已載入時，會觸發 load 事件。此時，即使在視覺視口中存在尚未載入的延遲載入的圖片或 iframe，也是完全可能的（甚至很可能）的。

您可以透過檢查其布林值 complete 屬性的值來確定給定的圖片是否已完成載入。

Intersection Observer API

Intersection Observers 允許使用者知道觀察到的元素何時進入或退出瀏覽器的視口。

事件處理器

當瀏覽器相容性至關重要時，有幾種選擇：

• Polyfill Intersection Observer
• 回退到 scroll、resize 或 orientation change 事件處理程式，以確定特定元素是否在視口中

規範

另見

• 渲染阻塞 CSS
• 瀏覽器級別的圖片延遲載入