回流与重绘

浏览器会将html解析为DOM 将css解析为cssOM 两者合并就会产生render tree
有了rendertree之后就知道了所有的节点样式，就会计算他们在页面的大小和位置 最后绘制在页面上

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

回流（reflow）

当rendertree中的元素的尺寸、结构、或者某些属性变化后，浏览器为了重新渲染文档流而重新计算文档中的位置和集合结构的过程 这就是回流

会导致回流的操作：

页面首次渲染
浏览器窗口大小发生改变
元素尺寸或位置发生改变
元素内容变化（文字数量或图片大小等等）
元素字体大小变化
添加或者删除可见的DOM元素
激活CSS伪类（例如：:hover）
查询某些属性或调用某些方法

一些常用且会导致回流的属性和方法：

clientWidth、clientHeight、clientTop、clientLeft
offsetWidth、offsetHeight、offsetTop、offsetLeft
scrollWidth、scrollHeight、scrollTop、scrollLeft
scrollIntoView()、scrollIntoViewIfNeeded()
getComputedStyle()
getBoundingClientRect()
scrollTo()

重绘（repaint）

页面中的元素样式改变 但没有影响他在页面中的位置 浏览器会赋予元素新的样式并进行重绘

回流的代价比重绘高

有时仅仅是一个元素的位置发生变化，需要对齐进行回流，但他的父元素以及其他跟随他的元素的位置也可能发生变化，就造成了一系列的回流。

现代浏览器会对频繁的回流或重绘操作进行优化：

浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，这样可以把多次回流和重绘变成一次。
当你访问以下属性或方法时，浏览器会立刻清空队列：
clientWidth、clientHeight、clientTop、clientLeft
offsetWidth、offsetHeight、offsetTop、offsetLeft
scrollWidth、scrollHeight、scrollTop、scrollLeft
width、height
getComputedStyle()
getBoundingClientRect()

因为队列中可能会有影响到这些属性或方法返回值的操作，即使你希望获取的信息与队列中操作引发的改变无关，浏览器也会强行清空队列，确保你拿到的值是最精确的。

避免回流与重绘

css

避免使用table布局
避免设置多层的内联样式
尽可能在DOM树的最末端改变class

javascript

避免频繁地使用js操作样式
避免频繁地操作DOM