延遲載入

隨著網頁的發展，我們看到了傳送給使用者的資源數量和大小的巨大增長。在 2011 年到 2019 年之間，桌面端的資源中位數重量從~100KB增長到~400KB，移動端從~50KB增長到~350KB。而桌面端的圖片大小從~250KB增長到~900KB，移動端從~100KB增長到~850KB。

我們可以用來解決這個問題的方法之一是，透過延遲載入對首次渲染不重要的資源來縮短關鍵渲染路徑長度。一個實際的例子是，當你進入一個電子商務網站的首頁，有一個指向購物車頁面/部分的連結，但在你導航到那裡之前，不會下載任何購物車頁面的資源（如 JavaScript、CSS 和圖片）。

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

程式碼拆分

JavaScript、CSS 和 HTML 可以拆分成更小的塊。這樣就可以在最開始傳送提供價值所需的最小程式碼，提高頁面載入速度。其餘程式碼可以按需載入。

• 入口點拆分：根據應用程式中的入口點（多個）拆分程式碼
• 動態拆分：將使用動態 import()表示式的程式碼拆分

指令碼型別模組

任何具有type="module"屬性的指令碼標籤都被視為JavaScript 模組，預設情況下會被延遲載入。

預設情況下，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覆蓋預設行為，並預載入網頁字型資源。

另請參閱：連結元素。

網頁通常包含許多圖片，這些圖片會影響資料使用量和頁面載入速度。大多數圖片都在螢幕外（非關鍵），需要使用者互動，如滾動才能檢視。

載入屬性

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

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

當急切載入的內容全部載入完畢後，load 事件就會觸發。此時，有可能（甚至很可能）可視視窗記憶體在一些尚未載入的延遲載入圖片或 iframe。

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

交叉觀察者 API

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

事件處理程式

當瀏覽器相容性至關重要時，有一些選擇

• 交叉觀察者 polyfill
• 回退到滾動、調整大小或方向更改事件處理程式來確定特定元素是否在視窗內

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