CSS Triggers

[hushicai]

前面我们在浏览器渲染优化一文中提到：

每一帧并不一定总是需要经过像素管道每个部分的处理。

实际上，我们修改不同类型的CSS属性后，浏览器在每一帧呈现视觉效果时，可能经过的像素管道并不相同。

如果我们只修改了paint only属性就不需要经过Layout管道部分：

而最优的路径可能是：

所以，我们在修改CSS属性时，就需要考虑尽量减少管道的渲染路径。

我们可以参考CSS Triggers，它指出了特定 CSS 属性将触发像素管道哪些部分。