contain 為何？
這個 contain 屬性的主要目的是隔離指定內容的樣式、布局和渲染。開發人員可以使用這個 contain 屬性來限制指定的DOM元素和它的子元素同頁面上其它內容的聯系；我們可以把它看做一個iframe。跟iframe很相似，它能建立起一個邊界，產生一個新的根布局；保證了它和它的子元素的DOM變化不會觸發父元素重新布局、渲染等。
開發人員可以用這個 contain 屬性聲明一個元素和它的子元素是——盡可能的——和頁面上的其它元素保持獨立。
none | strict | layout | style | paint | size | contain
這個 contain 屬性可以有7種不同的值。
- none 無
- layout 開啟布局限制
- style 開啟樣式限制
- paint 開啟渲染限制
- size 開啟size限制
- content 開啟除了size外的所有限制
- strict開啟 layout, style 和 paint 三種限制組合
contain 使用場景舉例
我們已經知道了，使用這個 contain 屬性可以將一個元素標志為和頁面上其它元素是相對獨立的元素。為了說明這個屬性的作用，下面舉幾個使用例子：
頁面小飾件(widgets)
通常在頁面上添加第三方小飾件時，我們幾乎對它們沒有什么太多的控制，比如分享工具，它們可能會因為具有相當耗資源的布局、樣式、渲染操作等大幅度的降低整個頁面的執行效率。為了將它們同我們的網站隔離開來，使用 contain: strict; 將第三方的小飾件同頁面上的其它內容隔離開來。
屏幕外的內容
如果你有一個導航欄或其它類似的東西並不在屏幕可現實范圍內出現，瀏覽器同樣會為這些不可見的元素進行渲染。通過使用 contain: paint; 瀏覽器就會忽略渲染這些屏幕外不可見的元素，從而能更快的渲染其它內容。
豌豆資源搜索網站 https://55wd.com 廣州vi設計公司http://www.maiqicn.com
計算容器尺寸
我在文字開頭提到過這個問題，使用 contain: strict; 可以 免去很多關於容器尺寸控制的問題。比如，子元素的內容會影響容器的大小，使用 contain 屬性就可以避免這樣的問題產生。
為什么瀏覽器不能自動的實現 contain 的功能
瀏覽器已經盡可能的在頁面下做了最大的優化，但每個瀏覽器引擎的實現方法並不盡相同。而 contain 屬性可以提供一種標准的方式讓開發人員告訴 瀏覽器 某些方面可以這樣優化，哪些不能優化。
什么時候應該使用contain
如果你的頁面很簡單，沒有復雜的DOM節點和小飾件(widgets)，那就沒必要考慮使用這種css的contain技術。而如果你開發的頁面非常復雜，那么，這個css的contain技術可以幫助你優化頁面的性能。而對於第三方的小飾件，始終使用contain: strict;是很好的習慣，它可以保護你的頁面不受它們的干擾而出現性能問題。
contain使用
{
/* No layout containment. */ contain: none; /* Turn on containment for layout, style, paint, and size. */ contain: strict; /* Turn on containment for layout, style, and paint. */ contain: content; /* Turn on size containment for an element. */ contain: size; /* Turn on layout containment for an element. */ contain: layout; /* Turn on style containment for an element. */ contain: style; /* Turn on paint containment for an element. */ contain: paint; }