1 重绘（repaint）：
屏幕的一部分要重绘。渲染树节点发生改变，但不影响该节点在页面当中的空间位置及大小。譬如某个div标签节点的背景颜色、字体颜色等等发生改变，但是该div标签节点的宽、高、内外边距并不发生变化，此时触发浏览器重绘（repaint）。
2 重排（reflow）：
也有称回流，当渲染树节点发生改变，影响了节点的几何属性（如宽、高、内边距、外边距、或是float、position、display：none;等等），导致节点位置发生变化，此时触发浏览器重排（reflow），需要重新生成渲染树。譬如JS为某个p标签节点添加新的样式："display:none;"。导致该p标签被隐藏起来，该p标签之后的所有节点位置都会发生改变。此时浏览器需要重新生成渲染树，重新布局，即重排（reflow）。
注意：重排必将引起重绘，而重绘不一定会引起重排。
何时回引起重排？
当页面布局和几何属性改变时就需要重排。下述情况会发生浏览器重排：
1、添加或者删除可见的DOM元素；
2、元素位置改变——display、float、position、overflow等等；
3、元素尺寸改变——边距、填充、边框、宽度和高度
4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
5、页面渲染初始化；
6、浏览器窗口尺寸改变——resize事件发生时；
3 如何减少和避免重排
Reflow 的成本比 Repaint 的成本高得多的多。一个节点的 Reflow 很有可能导致子节点，甚至父节点以及兄弟节点的 Reflow 。在一些高性能的电脑上也许还没什么，但是如果 Reflow 发生在手机上，那么这个过程是延慢加载和耗电的。----浏览器的渲染原理简介
- 直接改变className，如果动态改变样式，则使用cssText（考虑没有优化的浏览器）；
- 让要操作的元素进行”离线处理”，处理完后一起更新；
a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘；
b) 使用display:none技术，只引发两次回流和重绘；
c) 使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；
3.不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，利用缓存；
4.让元素脱离动画流，减少回流的Render Tree的规模；
标签：repaint,浏览器,reflow,重绘,改变,重排,节点 From： https://www.cnblogs.com/zhaofen/p/17115653.html