回流和重绘

回流(reflow)

• 也可以称之为重排
• 第一次确定节点的大小和位置，称之为布局（layout）
• 之后对节点的大小、位置修改重新计算称之为回流

什么时候引起回流

• 比如DOM结构发生改变（添加新节点或者移除节点）
• 比如改变了布局（修改了width、height、padding、font-size等值）
• 比如窗口resize（修改了窗口的尺寸等）
• 比如第哦啊用getComputedStyle方法获取尺寸、位置信息

重绘(repaint)

• 第一次渲染内容称之为绘制（paint）
• 之后重新渲染称之为重绘

什么时候引起重绘

• 比如修改背景色、文字颜色、边框颜色、样式等

回流和重绘

• 回流一定会引起重绘，所以回流是一件很消耗性能的事情

• 在开发中要尽量避免发生回流

• 修改样式时一次性修改

  • 比如通过cssText修改，比如通过添加class修改

• 尽量避免频繁的操作DOM

  • 我们可以在一个DocumentFragment或者父元素中将要操作的DOM操作完成，再一次性的操作

• 尽量避免通过getComputedStyle获取尺寸、位置等信息

• 对某些元素使用position的absolute或者fixed

  • 并不是不会引起回流，而是开销相对较小，不会对其他元素造成影响