現(xiàn)代瀏覽器在渲染網(wǎng)頁復雜的HTML、CSS 和JavaScript 代碼方面效率顯著提升，只需幾毫秒即可將代碼轉(zhuǎn)換為可用的頁面。

那么，前端開發(fā)者如何進一步提升瀏覽器渲染速度呢？除了那些容易被遺忘的最佳實踐（尤其是在我們對生成的代碼控制有限的情況下），例如：精簡CSS 選擇器，保持HTML 結(jié)構(gòu)扁平化，以及謹慎操作JavaScript 中的HTML 和CSS 等，我們還可以利用CSS 的contain屬性。

contain屬性允許開發(fā)者指定一個元素及其內(nèi)容在多大程度上獨立于文檔樹的其余部分。這使得瀏覽器能夠僅對DOM 的有限區(qū)域（而非整個頁面）重新計算布局、樣式、繪制、大小或它們的任意組合，從而帶來明顯的性能提升。

簡單來說， contain屬性可以為瀏覽器提供有關(guān)頁面上各個元素之間關(guān)系的提示，這些元素通常是包含內(nèi)容的容器元素，即使這些內(nèi)容是動態(tài)的。例如，在單頁應用(SPA) 中，動態(tài)內(nèi)容經(jīng)常在頁面中插入和刪除，通常與頁面上的其他內(nèi)容無關(guān)。

瀏覽器無法預測JavaScript 插入和刪除頁面內(nèi)容可能導致的未來布局變化。即使是簡單的操作，例如向元素添加類名、動畫化DOM 元素或獲取元素尺寸，都可能導致頁面重排和重繪，這些操作代價高昂，應盡量避免或減少。

開發(fā)者可以根據(jù)頁面設計的用戶體驗來預測可能的未來變化，例如用戶點擊按鈕時，會調(diào)用數(shù)據(jù)插入到當前視圖中某個div 元素中。我們知道這是可能的，但瀏覽器不知道。我們也知道，將數(shù)據(jù)插入該div 元素很可能不會改變頁面上其他元素的視覺效果或其他方面。

瀏覽器開發(fā)者已經(jīng)花費大量時間優(yōu)化瀏覽器以處理這種情況。雖然有各種方法可以幫助瀏覽器更高效地處理這種情況，但更直接的提示會更有幫助。 contain屬性為我們提供了一種提供這些提示的方法。

contain屬性的各種用法

contain屬性有三個值，可以單獨使用或組合使用： size 、 layout和paint 。它還有兩個簡寫值，用于常見的組合： strict和content 。讓我們了解一下每個值的含義。

需要注意的是，規(guī)范中涵蓋了每個值的許多規(guī)則和邊緣情況。在大多數(shù)情況下，這些規(guī)則可能不會引起太多關(guān)注。但是，如果您得到意外的結(jié)果，那么快速查看規(guī)范可能會有幫助。

規(guī)范中還有一種樣式包含類型，本文不會介紹。原因是目前這種樣式包含類型被認為價值不大，并且目前有被從規(guī)范中移除的風險。

size包含

size包含很容易解釋。當包含此包含的容器參與布局計算時，瀏覽器可以跳過相當一部分計算，因為它會忽略該容器的子元素。預期容器將具有設置的高度和寬度；否則，它將折疊，并且這是頁面布局中唯一考慮的因素。它被視為沒有任何內(nèi)容。

請注意，子元素可能會影響其容器的大小，具體取決于容器的樣式。在計算布局時必須考慮這一點；使用size包含，很可能不會考慮這一點。一旦容器相對于頁面的大小已確定，則將計算其子元素的布局。

size包含本身并沒有提供多少優(yōu)化。它通常與其他值組合使用。

但是，它可以提供的一個好處是幫助處理根據(jù)容器大小更改容器子元素的JavaScript，例如容器查詢類型的情況。在某些情況下，根據(jù)容器的大小更改子元素可能會導致容器在對子元素進行更改后更改大小。由于容器大小的更改可能會觸發(fā)子元素的另一次更改，因此您最終可能會出現(xiàn)更改循環(huán)。 size包含可以幫助防止這種循環(huán)。

這是一個關(guān)于此調(diào)整大小循環(huán)概念的完全人為的示例：（此處應插入代碼示例，展示size包含如何防止調(diào)整大小循環(huán)）

layout包含

layout包含告訴瀏覽器外部元素既不影響容器元素的內(nèi)部布局，也不影響容器元素的內(nèi)部布局影響外部元素。因此，當瀏覽器進行布局計算時，它可以假設具有layout包含的各種元素不會影響其他元素。這可以減少需要執(zhí)行的計算量。

另一個好處是，如果容器在屏幕外或被遮擋，則相關(guān)的計算可以延遲或降低優(yōu)先級。規(guī)范提供的一個示例是：

[…] 例如，如果包含框位于塊容器的末尾附近，而您正在查看塊容器的開頭

具有layout包含的容器成為絕對或固定位置子元素的包含塊。這與對容器應用相對位置相同。因此，請記住在應用此類型的包含時如何影響容器的子元素。

同樣，容器獲得新的堆疊上下文，因此z-index的使用方式與應用相對、絕對或固定位置相同。但是，設置top 、 right 、 bottom或left屬性對容器沒有影響。

這是一個簡單的例子：（此處應插入代碼示例，展示layout包含如何影響布局和堆疊上下文）

paint包含

paint包含告訴瀏覽器容器的子元素永遠不會繪制在容器框尺寸的邊界之外。這類似于在容器上設置overflow: hidden; ，但有一些區(qū)別。

首先，容器與在layout包含下的處理方式相同：它成為具有自身堆疊上下文的包含塊。因此，在paint包含中定位的子元素將在位置方面尊重容器。如果我們要復制上面的layout包含演示但改為使用paint包含，結(jié)果將大致相同。不同之處在于，當應用包含時，紫色線不會溢出容器，而是在容器的邊框框處被裁剪。

paint包含的另一個有趣的好處是，如果瀏覽器可以檢測到容器本身在視口中不可見，則它可以跳過該元素的子元素的繪制計算。如果容器不在視口中或以某種方式被遮擋，那么可以保證其子元素也不可見。例如，考慮一個通常位于頁面左側(cè)屏幕外的導航菜單，當點擊按鈕時它會滑入。當該菜單處于其正常的屏幕外狀態(tài)時，瀏覽器只需跳過嘗試繪制其內(nèi)容。

各種包含的組合使用

這三種包含提供了影響瀏覽器執(zhí)行的渲染計算部分的不同方法。 size包含告訴瀏覽器，當其內(nèi)容更改時，此容器不應導致頁面上的位置偏移。 layout包含告訴瀏覽器，此容器的子元素不應在其容器外部的元素中導致布局更改，反之亦然。 paint包含告訴瀏覽器，此容器的內(nèi)容永遠不會繪制在容器尺寸之外，并且如果容器被遮擋，則根本不要繪制內(nèi)容。

由于每個包含都提供不同的優(yōu)化，因此將某些包含組合在一起是有意義的。規(guī)范實際上允許這樣做。例如，我們可以將layout和paint組合使用作為contain屬性的值，如下所示：

 .el {
  contain: layout paint;
}

由于這是非常明顯的事情，規(guī)范實際上提供了兩個簡寫值：

content值將是Web 項目中最常用的值，其中包含許多動態(tài)元素，例如隨著時間的推移或用戶活動而更改內(nèi)容的大型多個容器。

strict值對于具有定義大小且永遠不會更改大小的容器（即使內(nèi)容更改）很有用。一旦到位，它將保持預期的尺寸。一個簡單的例子是一個包含第三方外部廣告內(nèi)容的div，其尺寸由行業(yè)定義，與頁面上的任何其他DOM 元素無關(guān)。

性能優(yōu)勢

這部分文章很難解釋。問題在于關(guān)于性能優(yōu)勢的視覺效果不多。大多數(shù)好處都是幕后優(yōu)化，幫助瀏覽器決定在布局或繪制更改時該做什么。

為了展示contain屬性的性能優(yōu)勢，我做了一個簡單的例子，它更改了具有多個子元素的元素的字體大小。這種更改通常會觸發(fā)重新布局，這也會導致頁面重繪。該示例涵蓋了none 、 content和strict的contain值。 （此處應插入代碼示例和性能測試結(jié)果）

布局一次，繪制兩次

請耐心聽我解釋。我保證它會有意義。

我將使用上面的演示作為以下描述的基礎(chǔ)。如果您希望繼續(xù)學習，請訪問演示的完整版本并打開DevTools。請注意，在運行性能工具后，您必須打開“frame”而不是“main”時間線的詳細信息才能看到我即將描述的內(nèi)容。

我實際上是從“fullpage”版本中截取屏幕截圖，因為DevTools 在該版本中效果更好。也就是說，“full”常規(guī)版本應該提供大致相同的想法。

在沒有包含的任務的事件日志中，繪制事件只觸發(fā)一次。通常，事件不會花費太長時間，范圍從0.2 毫秒到3.6 毫秒不等。更深入的細節(jié)是它變得有趣的地方。在這些細節(jié)中，它指出繪制區(qū)域是整個頁面。在事件日志中，如果您將鼠標懸停在繪制事件上，DevTools 甚至會突出顯示已繪制的頁面區(qū)域。在這種情況下，尺寸將是瀏覽器視口的尺寸。它還會注意到繪制的圖層根。

請注意，圖像左側(cè)的頁面區(qū)域已突出顯示，即使在紫色框之外也是如此。在右側(cè)，是繪制到屏幕的尺寸。在這種情況下，大約是視口的尺寸。為了以后進行比較，請注意#document 作為圖層根。

請記住，瀏覽器具有某些元素的圖層概念，以幫助繪制。圖層通常用于由于新的堆疊上下文而可能相互重疊的元素。一個例子是應用position: relative;和z-index: 1;到元素的方式將導致瀏覽器將該元素創(chuàng)建為一個新圖層。 contain屬性具有相同的效果。

DevTools 中有一個名為“rendering”的部分，它提供各種工具來查看瀏覽器如何渲染頁面。當選擇名為“Layer borders”的復選框時，我們可以根據(jù)包含看到不同的內(nèi)容。當包含為none時，您應該看不到超出典型靜態(tài)網(wǎng)頁圖層的圖層。選擇content或strict ，您可以看到紫色框轉(zhuǎn)換為它自己的圖層，并且頁面的其余圖層相應地發(fā)生變化。 （此處應插入屏幕截圖，展示不同包含類型下的圖層）

我之前提到過， content和strict都會導致繪制事件觸發(fā)兩次。這是因為出于兩個不同的原因執(zhí)行了兩個不同的繪制過程。在我的演示中，第一個事件用于紫色框，第二個事件用于紫色框的內(nèi)容。

通常，第一個事件將繪制紫色框并將該框的尺寸報告為事件的一部分。該框現(xiàn)在是它自己的圖層，并享受適用的好處。

第二個事件用于框的內(nèi)容，因為它們是滾動元素。正如規(guī)范所解釋的那樣；由于堆疊上下文是保證的，因此滾動元素可以繪制到單個GPU 圖層中。第二個事件中報告的尺寸更高，是滾動元素的高度?？赡苌踔粮则v出空間用于滾動條。

請注意這兩個圖像右側(cè)尺寸的差異。此外，這兩個事件的圖層根都是main.change 而不是上面看到的#document。紫色框是一個主元素，因此只繪制了該元素而不是整個文檔。您可以看到突出顯示的框而不是整個頁面。

這樣做的好處是，通常當滾動元素進入視野時，必須繪制它們。包含中的滾動元素已經(jīng)被繪制，因此在進入視野時不需要再次繪制它們。因此，我們也獲得了一些滾動優(yōu)化。

同樣，這可以在演示中看到。 （此處應插入屏幕截圖，展示不同包含類型下的滾動性能）

一個有趣的意外發(fā)現(xiàn)

當我嘗試上面的演示并了解繪制和滾動性能方面的工作方式時，我遇到一個有趣的問題。在一個測試中，我在頁面中央有一個簡單的框，但樣式最少。它本質(zhì)上是一個帶有大量文本內(nèi)容的滾動元素。我將內(nèi)容包含應用于容器元素，但我沒有看到上面描述的滾動性能優(yōu)勢。

該容器用“repaints on scroll”疊加層標記，并且繪制閃爍與未應用包含的情況相同，即使我知道實際上內(nèi)容包含已應用于該容器。因此，我開始將我的簡單測試與上面討論的樣式更豐富的版本進行比較。

我最終發(fā)現(xiàn)，如果容器的background-color為透明，則不會出現(xiàn)包含滾動性能優(yōu)勢。

我運行了一個類似的性能測試，我將更改內(nèi)容的字體大小以觸發(fā)重新布局和重繪。兩個測試的結(jié)果大致相同，唯一的區(qū)別是第一個測試的background-color為透明，第二個測試的background-color為適當?shù)念伾?。從?shù)字來看，幕后計算仍然更高效；只有繪制事件不同。似乎元素在具有透明background-color的情況下不會成為繪制計算中的自己的圖層。

第一個測試運行在事件日志中只有一個繪制事件。第二個測試運行有兩個繪制事件，正如我預期的那樣。如果沒有該背景顏色，瀏覽器似乎決定跳過包含的圖層方面。我什至發(fā)現(xiàn)通過使用與元素后面顏色相同的顏色來偽造透明度也能正常工作。我的猜測是，如果容器的背景是透明的，那么它必須依賴于下面的任何內(nèi)容，這使得不可能將容器分離到它自己的繪制圖層中。 （此處應插入屏幕截圖，展示透明背景顏色與不透明背景顏色下的不同結(jié)果）

我制作了測試演示的另一個版本，該版本將容器元素的background-color從透明更改為與正文背景顏色相同的顏色。以下是使用DevTools 中“Rendering”面板中的各種選項時的兩個屏幕截圖。 （此處應插入屏幕截圖，展示透明背景顏色與不透明背景顏色下的不同結(jié)果）

總結(jié)

本文介紹了CSS contain屬性的基礎(chǔ)知識，包括其值、好處和潛在的性能提升。將此屬性應用于HTML 中的某些元素有一些好處；哪些元素需要應用此屬性取決于您。至少，這就是我的理解，因為我不知道任何具體的指導。一般的想法是將其應用于其他元素的容器，尤其是那些具有某種動態(tài)方面的容器。

一些可能的場景：CSS 網(wǎng)格的網(wǎng)格區(qū)域、包含第三方內(nèi)容的元素以及根據(jù)用戶交互具有動態(tài)內(nèi)容的容器。在這些情況下使用該屬性應該不會有任何害處，假設您不是試圖包含實際上依賴于該包含之外的另一個元素的元素。

瀏覽器支持非常強大。 Safari 是目前唯一一個不支持的瀏覽器。無論如何，您仍然可以使用該屬性，因為如果瀏覽器不理解該屬性或其值，它只會簡單地跳過該代碼而不會出錯。

因此，請隨意開始包含您的內(nèi)容！

以上是讓我們深入研究CSS包含屬性的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！