content-visibility：可提升算繪成效的全新 CSS 資源

略過畫面外內容的顯示作業，縮短初始載入時間。

Jeremy Wagner
Una Kravets
Vladimir Levin
Vladimir Levin

content-visibility敬上 於 Chromium 第 85 版中推出的 屬性，可能是最具影響力的全新 CSS 供應商之一 以便改善網頁載入效能content-visibility 可啟用 略過元素的轉譯工作，包括版面配置和繪製 以備不時之需由於廣告素材會自動顯示 使用 content-visibility 屬性會導致內容不在畫面外 大幅加快初始使用者的載入速度還能加快與 螢幕上的內容效果好吃。

以圖表代表網路結果的圖表
在我們的文章示範中，將 content-visibility: auto 套用至分塊內容區域，可大幅提升初始載入時的轉譯效能 7 倍。請繼續閱讀以瞭解詳情。

瀏覽器支援

瀏覽器支援

  • 85
  • 85
  • 125
  • 18

資料來源

content-visibility 依賴 CSS 容器中的基元 規格。雖然 content-visibility 只有 Chromium 85 目前支援這項功能 (而且認為「」 prototyping」： Firefox) 中，「包含」規格的大多數新式版本皆支援 瀏覽器。

CSS 包含

CSS 遏制的一大和主要目標是啟用轉譯功能 透過提供可預測的可預測性隔離機制， 來自網頁其餘部分的 DOM 子樹狀結構。

基本上，開發人員可以告訴瀏覽器網頁上有哪些部分封裝了 是內容集合，可讓瀏覽器在不使用 需要考量子樹狀結構以外的狀態知道哪段內容 (子樹狀結構) 包含獨立內容，表示瀏覽器可以進行最佳化 決定要採用何種做法

CSS 供應商分為四種類型 區隔 每個 contain CSS 屬性可能的值，可以合併 。

  • size：元素的大小限制，可確保元素的方塊可以 而無需檢視它的子系因此，我們可以 但只要設定 元素。
  • layout：版面配置包含表示子係不會影響 網頁上其他方塊的外部版面配置。我們可以略過 子係版面配置則採用其他方塊配置
  • style：樣式包含可確保哪些屬性可產生效果 不僅僅是其子系，都不會逸出元素 (例如計數器)。這個 這樣我們就能略過子系的樣式運算 是在其他元素上運算樣式
  • paint：用顏料遏制確保包含方塊的子系 不會在邊界之外顯示。元素完全不會溢位 即使元素在畫面外或未顯示時，其子係也會 也無法顯示這可能導致系統略過 子系物件。

使用 content-visibility 略過轉譯工作

您可能不容易確定使用哪些包含值 最佳化方法只有在指定適當的組合時才會啟動。你可以 嘗試分析數值，看看成效如何 最佳，或 可以使用另一個名為 content-visibility 的 CSS 屬性，套用所需的 自動納入。content-visibility 可確保您 「效能」可讓瀏覽器只需花費少量心力 開發人員。

內容瀏覽權限屬性可接受多個值，但 auto 是單一值 效能立即提升包含 content-visibility: auto 取得 layout、style 和 paint 控制權限。如果 元素出現在畫面外 (且未與使用者相關) 也就是子樹狀結構中具有焦點或已選取項目的項目 也會取得 size 遏制 (並停止回應) 繪畫 和 命中測試 內容)。

使用這項功能，簡單來說，如果元素與畫面外元素 則不會顯示。瀏覽器不會考量元素的大小 並停止執行該內容大部分的算繪方式，例如樣式設定 以及元素子樹狀結構的版面配置

當元素接近可視區域時，瀏覽器就不會再新增 size 然後開始繪製並測試元素的內容這個 能讓使用者及時看到轉譯工作。

無障礙注意事項

content-visibility: auto 的其中一項功能是螢幕外內容仍可在文件物件模型中持續使用，因此也屬於無障礙樹狀結構 (與 visibility: hidden 不同)。也就是說，使用者可以在網頁上搜尋及前往所需內容，不必等待系統載入或犧牲轉譯效能。

不過，也有缺點，就是具備樣式功能 (例如 display: none 或 visibility: hidden) 的地標元素也會出現在螢幕外時，無障礙功能樹狀結構中，因為瀏覽器必須等這些樣式進入可視區域後，才會轉譯這些樣式。為避免在無障礙樹狀結構中顯示這些內容，請務必一併新增 aria-hidden="true"。

範例：旅遊網誌

在本範例中，我們在右側以旅遊網誌為基準，並將 content-visibility: auto 套用至左側的多個區塊。結果會顯示網頁初次載入時，轉譯時間從 232 毫秒到 30 毫秒。

旅遊網誌通常包含一系列的報導和幾張圖片 描述性文字以下是一般瀏覽器中前往的網址 旅遊網誌：

  1. 系統會從網路下載網頁的部分內容及任何必要項目 再複習一下，機構節點 是所有 Google Cloud Platform 資源的根節點
  2. 瀏覽器的樣式和版面配置會顯示網頁內容，而且 考慮內容是否向使用者顯示
  3. 瀏覽器返回步驟 1，直到所有網頁和資源都載入完畢 已下載完成。

在步驟 2 中，瀏覽器會處理所有內容，尋找 已有所變更。它可同時更新所有新元素的樣式和版面配置，以及 可能會隨著更新作業而改變的元素。目前顯示 這些研究有助於我們找出 能引導後續作業的標準這可能需要時間。

旅遊網誌的螢幕截圖。
旅遊網誌範例。請參閱 Codepen 的示範

現在，請思考在每個content-visibility: auto 網誌中的個別報導一般迴圈就像瀏覽器 下載並轉譯網頁的區塊不過不同之處在於 只會執行步驟 2 中的工作量

有了內容可見性，您就能指定內容的樣式和版面配置 目前使用者看到的畫面 (位於螢幕上)。不過在處理 載入整個畫面後，瀏覽器就會略過轉譯工作 只設定元素方塊本身的樣式和版面配置

此頁面的載入效能將像內容包含全螢幕一樣。 設計故事和空白方塊這個做法 並預期可減少 50% 以上的 載入中。在本例中，我們發現顯示時間從 232 毫秒提升為 30 毫秒的顯示時間。效能提升 7 倍。

你需要採取哪些工作才能獲得這些好處？首先 將內容分成幾個部分：

註解螢幕截圖：使用 CSS 類別將內容切割為不同區段。
為了接收 content-visibility: auto，將內容分割為多個區段的範例，並套用了 story 類別。請參閱 Codepen 的示範

接著，將下列樣式規則套用到這些部分：

.story {
  content-visibility: auto;
  contain-intrinsic-size: 1000px; /* Explained in the next section. */
}

使用 contain-intrinsic-size 指定元素的自然大小

為了發揮 content-visibility 的潛在效益，瀏覽器 套用大小控制，確保內容轉譯結果 完全不會影響元素的大小。也就是說 系統會以空白的方式版面配置如果元素未指定高度 一般區塊版面配置中，高度就會是 0

這可能不理想，因為捲軸的大小會移動， 如何讓故事的高度不為零

幸好，CSS 提供了 contain-intrinsic-size 這個另一項屬性 當元素 會受到大小限制影響。在本範例中，我們將這個值設為 1000px 區段高度和寬度的預估值。

也就是說，這個元素會以「內建大小」的單一子項一樣版面配置 以確保未調整大小的 div 仍佔用空間。 contain-intrinsic-size 為預留位置大小，取代顯示的內容。

Chromium 98 以上版本提供一個新的 auto contain-intrinsic-size 的關鍵字。如有指定，瀏覽器會記住 上次顯示的大小 (如有)，並使用該大小取代開發人員提供的預留位置 大小舉例來說，如果您指定 contain-intrinsic-size: auto 300px， 元素一開始會為每個維度提供 300px 內建尺寸，但一次 元素的內容轉譯後，會保留轉譯的內建大小。 系統也會記住所有後續的顯示大小變更。實際上，這表示 捲動套用 content-visibility: auto 的元素，然後向後捲動 元件離開螢幕時，系統會自動維持理想的寬度和高度，而不會還原 調整預留位置大小這項功能對無限捲動器來說特別實用 現在可以隨著使用者 瀏覽網頁時

使用 content-visibility: hidden 隱藏內容

如何不顯示內容？ 使用者操作，同時利用快取轉譯狀態的好處？輸入： content-visibility: hidden。

content-visibility: hidden 屬性與 顯示未轉譯內容以及快取轉譯狀態，就跟 content-visibility: auto 一樣 畫面外。然而，與 auto 不同，系統不會自動啟動 也就是在畫面上

透過這種方式，您可以隱藏元素的內容 稍後再快速取消隱藏

和其他隱藏元素內容的常見方式進行比較：

  • display: none：隱藏元素並刪除其轉譯狀態。這個 表示取消隱藏元素，費用與使用 相同的內容
  • visibility: hidden：隱藏元素並保留其算繪狀態。這個 並未將元素從文件中移除，因為該元素是子樹狀結構 仍會佔用網頁上的幾何空間，使用者仍可點擊。這項服務 也會隨時視需要更新轉譯狀態，即使隱藏也一樣。

另一方面，content-visibility: hidden 會在 會保留轉譯狀態，因此如有任何需要變更 只有在元素再次顯示 (也就是 已移除 content-visibility: hidden 屬性)。

實作 content-visibility: hidden 時的幾項絕佳用途 以及測量版面配置這項工具也很適合 單頁應用程式 (SPA)。閒置的應用程式檢視可在 DOM 中保留， 已套用「content-visibility: hidden」來避免顯示，但維持顯示 快取狀態。如此一來，當檢視畫面再次進入有效狀態時，檢視畫面就能快速算繪。

對下一個顯示效果的影響 (INP)

INP 指標評估的是網頁能否穩定回應使用者輸入的內容。在主執行緒上發生大量工作 (包括轉譯工作) 時，回應速度可能會受到影響。

只要可以減少任何特定網頁的轉譯工作，主執行緒就能更快地回應使用者輸入內容。這包括轉譯工作，以及在適當的情況下使用 content-visiblity CSS 屬性可能會減少轉譯工作，特別是在啟動期間，大部分的算繪和版面配置工作都已完成。

減少轉譯工作會對 INP 造成直接影響。如果使用者嘗試與正確使用 content-visibility 屬性的網頁互動，以便延遲版面配置和畫面外元素轉譯作業，主執行緒有機會回應使用者可見的重要工作。這在某些情況下可以改善網頁的 INP。

結論

「content-visibility」和「CSS 包含規格」意味著一些令人振奮的成效 你的 CSS 檔案就會立即生效如要進一步瞭解 請參閱：