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

略過螢幕外內容的算繪作業，縮短初始載入時間。

Una Kravets
Jeremy Wagner
Vladimir Levin
Vladimir Levin

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

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

瀏覽器支援

瀏覽器支援

  • Chrome：85。
  • Edge：85，
  • Firefox：125。
  • Safari：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. 部分網頁會從網路下載，並隨附任何必要的資源。
  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 檔案就會立即生效如要進一步瞭解這些屬性，請參閱：