略過畫面外內容的顯示作業,縮短初始載入時間。
content-visibility
敬上
於 Chromium 第 85 版中推出的 屬性,可能是最具影響力的全新 CSS 供應商之一
以便改善網頁載入效能content-visibility
可啟用
略過元素的轉譯工作,包括版面配置和繪製
以備不時之需由於廣告素材會自動顯示
使用 content-visibility
屬性會導致內容不在畫面外
大幅加快初始使用者的載入速度還能加快與
螢幕上的內容效果好吃。
![以圖表代表網路結果的圖表](https://web.developers.google.cn/static/articles/content-visibility/image/demo-figures.jpg?authuser=19&hl=zh-tw)
content-visibility: auto
套用至分塊內容區域,可大幅提升初始載入時的轉譯效能 7 倍。請繼續閱讀以瞭解詳情。瀏覽器支援
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 毫秒。旅遊網誌通常包含一系列的報導和幾張圖片 描述性文字以下是一般瀏覽器中前往的網址 旅遊網誌:
- 系統會從網路下載網頁的部分內容及任何必要項目 再複習一下,機構節點 是所有 Google Cloud Platform 資源的根節點
- 瀏覽器的樣式和版面配置會顯示網頁內容,而且 考慮內容是否向使用者顯示
- 瀏覽器返回步驟 1,直到所有網頁和資源都載入完畢 已下載完成。
在步驟 2 中,瀏覽器會處理所有內容,尋找 已有所變更。它可同時更新所有新元素的樣式和版面配置,以及 可能會隨著更新作業而改變的元素。目前顯示 這些研究有助於我們找出 能引導後續作業的標準這可能需要時間。
![旅遊網誌的螢幕截圖。](https://web.developers.google.cn/static/articles/content-visibility/image/a-screenshot-a-travel-bl-d12bedce7d152.jpg?authuser=19&hl=zh-tw)
現在,請思考在每個content-visibility: auto
網誌中的個別報導一般迴圈就像瀏覽器
下載並轉譯網頁的區塊不過不同之處在於
只會執行步驟 2 中的工作量
有了內容可見性,您就能指定內容的樣式和版面配置 目前使用者看到的畫面 (位於螢幕上)。不過在處理 載入整個畫面後,瀏覽器就會略過轉譯工作 只設定元素方塊本身的樣式和版面配置
此頁面的載入效能將像內容包含全螢幕一樣。 設計故事和空白方塊這個做法 並預期可減少 50% 以上的 載入中。在本例中,我們發現顯示時間從 232 毫秒提升為 30 毫秒的顯示時間。效能提升 7 倍。
你需要採取哪些工作才能獲得這些好處?首先 將內容分成幾個部分:
![註解螢幕截圖:使用 CSS 類別將內容切割為不同區段。](https://web.developers.google.cn/static/articles/content-visibility/image/an-annotated-screenshot-9dac5c2e32b01.jpg?authuser=19&hl=zh-tw)
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 檔案就會立即生效如要進一步瞭解
請參閱: