reflow / repaint

[scarcat]

HTML 页面显示流程

HTML => DOM 树
CSS => CSSOM 树

DOM 树 + CSSOM 树 => 渲染树（Render树）=> 页面呈现

回流（reflow）和重绘（repaint）

回流必将引起重绘，而重绘不一定会引起回流

• 页面布局和几何属性改变时就需要回流

  • 添加或者删除可见的 DOM 元素；
  • 元素位置改变；
  • 元素尺寸改变——边距、填充、边框、宽度和高度
  • 内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
  • 页面渲染初始化；
  • 浏览器窗口尺寸改寸改变——resize 事件发生时

• 浏览器会重新绘制受影响的部分到屏幕；

• 浏览器优化：所有会引起回流、重绘的操作放入队列，但是一下属性获取回刷新队列；

  • offsetTop / offsetLeft / offsetWidth / offsetHeight
  • scrollTop / scrollLeft / scrollWidth / scrollHeight
  • clientTop / clientLeft / clientWidth / clientHeight
  • width / height
  • getComputedStyle() / currentStyle

• 优化策略

  • 直接改变 className 或者批量修改（cssText）；
  • 离线处理，然后更新；
  • 缓存引起 Flush 操作的属性值
  • 让元素脱离文档流程；