浏览器的重绘与重排

什么是浏览器的重排与重绘？

一个页面由两部分组成：
DOM：描述该页面的结构
render：描述DOM节点（nodes）在页面上如何呈现

重绘（repaint）:

• 当DOM元素的属性发生变化（如color）时，浏览器会通知render重新描绘相应的元素，此过程成为重绘。

重排（reflow）：

• 如果该次变化涉及元素布局（如width），浏览器则抛弃原有属性，重新计算并把结果传递给render以重新描绘元素，此过程称为重排。

这两个过程是很 耗费浏览器性能 的，从IE系列和Chrome渲染页面速度上的差距即可看出渲染引擎计算对应值和呈现并不一定高效，而每次对元素的操作都会发生repaints或reflow，因此编写DOM交互时如果不注意就会导致页面性能低下。

页面渲染的过程如下：

页面渲染过程图.png

• 解析HTML代码并生成一个DOM树。
• 解析CSS文件，顺序为：浏览器默认样式 -> 自定义样式 ->

如何减少重排？

怎样尽可能的缩短浏览器上页面渲染的时间？