-
重绘: 当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而 不会影响布局的操作，例如：
color、background-color、visibility等，我们将这样的操作称为重绘。 -
回流：当渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重 新构建的操作，会影响到布局的操作，这样的操作我们称为回流。
常见引起回流属性和方法： 任何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发回流。 （1）添加或者删除可见的 DOM 元素； （2）元素尺寸改变——边距、填充、边框、宽度和高度 （3）内容变化，比如用户在 input 框中输入文字 （4）浏览器窗口尺寸改变——resize 事件发生时 （5）计算 offsetWidth 和 offsetHeight 属性 （6）设置 style 属性的值 （7）当你修改网页的默认字体时。
一些常用且会导致回流的属性和方法：
-
clientWidth、clientHeight、clientTop、clientLeft -
offsetWidth、offsetHeight、offsetTop、offsetLeft -
scrollWidth、scrollHeight、scrollTop、scrollLeft -
scrollIntoView()、scrollIntoViewIfNeeded() -
getComputedStyle() -
getBoundingClientRect() -
scrollTo()
回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变父节点里的子节点很可能会导致父节点的一系列回流。
性能影响
回流比重绘的代价要更高。
有时即使仅仅回流一个单一的元素，它的父元素以及任何跟随它的元素也会产生回流。
现代浏览器会对频繁的回流或重绘操作进行优化：
浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，这样可以把多次回流和重绘变成一次。
当你访问以下属性或方法时，浏览器会立刻清空队列：
clientWidth、clientHeight、clientTop、clientLeft
offsetWidth、offsetHeight、offsetTop、offsetLeft
scrollWidth、scrollHeight、scrollTop、scrollLeft
width、height
getComputedStyle()，
getBoundingClientRect()，
因为队列中可能会有影响到这些属性或方法返回值的操作，即使你希望获取的信息与队列中操作引发的改变无关，浏览器也会强行清空队列，确保你拿到的值是最精确的。