CSS 新属性 contain: 允许开发者限定浏览器 style、layout、paint的工作范围

[justjavac]

简介

先上一张图看性能：

当我们对一个页面进行布局时，性能瓶颈通常是 style、layout、paint。

一般情况下，浏览器会把 整个 DOM 作为 CSS 布局上下文，因此：当我们改变部分 DOM 的样式时，也会影响到其他部分，并且没有什么方式来告诉浏览器哪些内容应该在范围内哪些应该在范围外。

假设你有如下页面结构：

<section class="view">
  Home
</section>

<section class="view">
  About
</section>

<section class="view">
  Contact
</section>

现在在 view 里面新增一些元素，会影响页面的 style、layout、paint：

<section class="view">
  Home
</section>

<section class="view">
  About
  <div class="newly-added-element">Check me out!</div>
</section>

<section class="view">
  Contact
</section>

在上面的示例中，所有的**节点（whole DOM）**均被影响，这就意味着，不论元素的 style、layout、paint 是否改变，都会重新计算他们的样式和布局。

现代主流的浏览器都会做一些智能的判断，最终决定哪些需要改变，哪些不需要改变。

不过，页面布局是很复杂的，浏览器不一定能判断到所有的情况。好消息是，一个新的 CSS 属性 contain 把判断的事情交给了开发者。

兼容性

52+

❓

❌

❌

❌

40+

6+

实用程度

★★★★

相关链接

• CSS Containment in Chrome 52
• contain - CSS - MDN
• [译]Chrome 52版本里的CSS Containment
• CSS Containment Spec

[justjavac]

刚才看到 w3c 中国发的微博 https://weibo.cn/1893751011/4138531082921261

2017年8月8日，CSS工作组发布了 CSS包含模块（CSS Containment Module Level 1）http://t.cn/R9YahZb 候选推荐标准。该模块定义了 ‘contain’ http://t.cn/R9YahZG 属性，用于指出该元素的子树将独立于页面的其他部分。该规范可用于用户代理（如浏览器等）的重度优化（heavy optimizations）。CSS是一种描述HTML和XML等结构化文本在屏幕、纸上及语音中如何绘制和展现的语言。更多内容：http://t.cn/RqjchWd