css的repaint和reflow

css的repaint和reflow

浏览器为了重新渲染部分或整个页面，重新计算页面元素位置和几何结构（geometries）的进程叫做 reflow。

由于 reflow 是一种浏览器中的用户拦截（user-blocking）操作，所以了解如何减少 reflow 次数，及不同的文档属性（DOM 层级（DOM depth），CSS 效率，不用类型的 style 变化）对 reflow 次数的影响对开发者来说非常必要。有时 reflow 页面中的一个元素会 reflow 它的父元素（译注：这里是复数）以及所有子元素。

一个元素的外观被改变，但没有改变布局叫做repaint(重绘)，如改变visibility、outline、前景色。

"According to Opera, repaint is expensive because the browser must verify the visibility of all other nodes in the DOM tree."
当repaint发生时，浏览器会验证DOM树上的所有其它结点的visibility属性。 repaint是昂贵的

reflow(回流)是导致DOM脚本执行低效的关键因素之一。页面上任何一个结点触发reflow，都会导致它的子结点及祖先结点重新渲染。

Nicole总结了在哪些情况下会导致reflow发生：

• 改变窗囗大小
• 改变文字大小
• 添加/删除样式表
• 内容的改变，如用户在输入框中敲字(这样也会-_-||)
• 激活伪类，如:hover (IE里是一个兄弟结点的伪类被激活)
• 操作class属性
• 脚本操作DOM(增加删除元素或元素的内容)
• 计算offsetWidth和offsetHeight
• 设置style属性

reflow是不可避免的，只能将reflow对性能的影响减到最小。Nicole提出6点建议：

1. 尽可能限制reflow的影响范围。
   以上面的代码为例，要改变p的样式，class不要加在div上，通过父级元素影响子元素不好。最好直接加在p上。

2. 通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow。所以最好通过设置class的方式。

3. 实现动画的元素，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局。

4. 权衡速度的平滑。比如实现一个动画，以1个像素为单位移动这样最平滑，但reflow就会过于频繁，CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多。

5. 不要用tables布局, 因为tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用table的场合，可以设置table-layout为auto或fixed，这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。

6. 避免css中使用expression (IE only)

有多种用户操作和 DHTML 变化可能会触发 reflow。调整浏览器窗口的大小，用 javascript 计算样式（computed styles），在 DOM 中创建删除元素，改变元素的 class 都会触发 reflow。值得注意的是，有些操作会多次触发 reflow，超出你的想象。

下面是一些减小 reflow 的原则：

• 减少不必要的 DOM 层级（DOM depth）。
  改变 DOM 树中的一级会导致所有层级的改变，上至根部，下至被改变节点的子节点。这导致大量时间耗费在执行 reflow 上面。
• 尽量减少 CSS 规则，去除未用到的 CSS。
  如果做复杂的表现变化，如动画，让它脱离文档流。用绝对定位或 fixed 定位来完成。
• 避免不必要的复杂的 CSS 选择器，尤其是后代选择器（descendant selectors），因为为了匹配选择器将耗费更多的 CPU。