近期CSS工作組發佈了新的Web規範CSS Containment模塊。該CSS模塊定義了contain屬性，用於表示元素的子樹以某種方式獨立於頁面的其他部分。該特性可以大大優化客戶端頁面的渲染性能，同時開發者不再需要擔心因一些小的變動而引起的頁面性能問題。
CSS Containment模塊規範的主要目的是，在頁面渲染的過程中通過忽略文檔中的某些子樹來提高頁面的渲染性能。Smashing Magazine（譯者注：Smashing Magazine是德國著名Web設計網站）的主編Rachel Andrew在一篇介紹這一新Web規範的文章中提到：
當容器的內容發生變化時，瀏覽器考慮到其他元素可能也會發生變化，於是就會去檢查頁面中所有的元素。一直以來瀏覽器都是這麼做的，大家都習以爲常了。但是從另一方面說，開發者很清楚當前修改的元素是否獨立、是否影響其他元素。因此如果開發者能把這個信息通過CSS告訴瀏覽器，那麼瀏覽器就不需要再去考慮其他元素了，這將是非常完美的事情。CSS Containment模塊中提供的contain屬性就爲我們提供了這種能力。
CSS Containment規範定義了一個contain 屬性，該屬性使我們可以設置某個DOM子樹獨立於整個頁面。contain屬性可以通過五個值（ strict, content, size, layout, paint）中的某一個來規定元素以何種方式獨立於文檔樹：
- layout：該值表示元素的內部佈局不受外部的任何影響，同時該元素以及其內容也不會影響到上級。
- paint：該值表示元素的子級不能在該元素的範圍外顯示，該元素不會有任何內容溢出（或者即使溢出了，也不會被顯示）。
- size：該值表示元素盒子的大小是獨立於其內容，也就是說在計算該元素盒子大小的時候是會忽略其子元素。
- content：該值是contain: layout paint的簡寫
- strict：該值是contain: layout paint size的簡寫
contain屬性使瀏覽器不必考慮整個頁面區域，而只需對限定的DOM區域完成佈局、樣式、繪製、大小以及它們組合的重新計算，使瀏覽器在頁面迴流和重繪上獲得明顯的性能收益，這點在大型頁面上尤爲突出。這一優勢，使得Igalia在基於Chromium實現CSS Containment規範的工作中得到了Bloomberg的大力支持。Manuel Rego Casasnovas在CSSconf EU 2019的演講中給我們提供了一個示例：一個包含超過一萬單元格的頁面，當其內容不斷髮生變化時，其渲染性能在使用了CSS Containment之後提升到了4倍。同時Rego也提到說，Bloomberg之所以會大力支持Igalia工作的原因是：
Bloomberg中有一些相當複雜的UI，他們能預見到CSS Containment規範帶來的好處。
Paul Lewis在這篇文章中向注重性能的開發人員介紹了DOM中的屬性修改會對渲染過程中的哪些部分造成影響。另外csstriggers這個網站還彙總了會觸發佈局的屬性，並按瀏覽器類型做了分類。
最後，除了Safari瀏覽器外，其他現代瀏覽器都實現了CSS Containment規範。
原文鏈接：