回流（reflow）与重绘（repaint）
浏览器的渲染过程
首先我们要了解浏览器的渲染过程：
1.解析 html,生成 dom 树，解析 css,生成 CSSOM树
2.将 DOM树 和 CSSOM树结合，生成渲染树（Render Tree）
3.渲染树的每个元素包含的内容都是计算过的，它被称之为布局（layout）。浏览器使用一种流式处理的方法，只需要一次绘制操作就可以布局所有的元素
4.将渲染树的各个节点绘制到屏幕上，这一步被称为绘制（painting）
即：解析html和css构建dom树和cssom树 -> 构建渲染树（render tree） -> 布局render树（layout） -> 绘制render树（painting）
回流（reflow）
回流又称重排，当浏览器发现布局（layout）发生了变化，这个时候就需要倒回去重新渲染，这个过程叫 回流（reflow）。回流几乎是无法避免的，因为只要用户进行了交互操作，就会发生页面的一部分重新渲染。
重绘（repaint）
重绘（repaint）则是当我们改变某个元素的背景色，文字颜色，边框颜色等不影响它周围或内部布局的属性是，屏幕的一部分要重画，但是元素的几何尺寸和位置没有发生改变。
需要注意的是
display：none 会触发回流（reflow），而
visibility：hidden 属性表示隐藏元素，元素任然占据着布局空间，并没有改变布局和几何尺寸，所以只会触发 重绘（repaint）
何时引起回流（reflow）
现代浏览器会对回流做优化，它会等到足够数量的变化发生，再做一次批处理回流
1.页面的第一次渲染（初始化）
2.DOM树的变化（如：增删节点）
3.Render树的变化（如：padding 改变）
4.浏览器窗口的尺寸变化 resize
5.fontsize的变化
6.获取元素的某些属性
浏览器为了获取正确的最新属性值也会提前触发回流，这些属性包括：
offsetLest、 offsetTop、 offsetWidth、 offsetHeight、 scrollTop/Left/Width/Height、
clientTop/Left/Width/Height、 调用了 getComputedStyle()。
何时引起重绘（repaint）
背景色、颜色的改变等会引起重绘（repaint）
回流和重绘的区别
当元素的位置或者几何尺寸发生改变时会触发回流，
而当背景色和颜色的改变会引起重绘，
注意：回流一定会发生重绘，而重绘不一定发生回流！
为了优化性能，我们需要减少回流、重绘的触发次数
1.用 transform 做形变和位移可以减少回流
2.避免组个修改节点样式，尽量一次性修改
3.可以将需要多次修改的 DOM 元素设置 display：none ，操作完再显示（因为隐藏元素不在 render 树内，因此修改隐藏元素不会触发回流重绘）
4.避免多次读取某些属性
5.通过绝对位移将复杂的节点元素脱离文档流，形成新的 Render Layer,降低回流成本
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
