网页的重排(reflow)与重绘(repaint)

一、什么是重排

二、什么是重绘

三、重排何时发生

当页面布局和几何属性改变时就会发生”重排“。下述情况中会发送重排：

• 添加或删除可见的DOM元素。
• 元素位置改变。
• 元素尺寸改变（包括：外边距、内边距、边框厚度、宽度、高度等属性改变）。
• 内容改变，例如：文本改变或图片呗另外一个不同尺寸的图片代替。
• 页面渲染初始化。
• 浏览器窗口尺寸

由于每次重排都会产生计算消耗，大多数浏览器通过队列化修改并批量执行来优化重排过程。获取布局信息的操作会导致队列刷新：

offsetTop offsetLeft offsetWidth offsetHeight
scrollTop scrollLeft scrollWidth scrollHeight
clientTop clientLeft clientWidth clientHeight
getComputedStytle (currentStylke in IE)

  以上属性和方法需要返回最新的布局信息，因此浏览器不得不执行渲染队列中的”待处理变化“并触发重排以返回正确值。

  在修改样式的过程中，最好避免使用以上列出的属性。因为它们都会刷新渲染队列，即使你是在获取最近未发生改变的或者与最新改变无关的布局信息。

四、重绘何时发生