昨晚回寝室的时候，刷知乎刚好刷到了一篇文章.里面刚好提了回流与重绘，想着好像还没有把它完整的总结一遍，今天就把它整理下,以备自己之后好翻阅．
首先，我们先来review下浏览器的渲染过程是怎样的：
1.首先将html代码通过深度优先遍历的方式,构造成DOM树.
2.CSS文件下载完成后,也会进行渲染，生成相应的CSSOM
3.当所有的CSS文件下载完且所有的CSSOM构建结束后,会与DOM一起生成render tree
4.接下来,浏览器就会进入layout环节,会将所有的节点位置计算出来
5.最后通过painting环节将所有的节点呈现在屏幕上.
我们知道，浏览器使用的是流式布局，因此对render tree的计算通常只需要遍历一次就ok,但table及其内部元素的话,它们需要多次运算,这也是为什么要避免使用table布局的原因之一.那么，接下来我们来回到主题，重绘与回流分别是些什么．
先来说下，重绘，当页面中元素样式的改变并不会导致它在文档流中的位置发生改变时并不影响它在文档流中的位置时，例如color,visibility,浏览器会将新样式赋予给元素并重新绘制它,这个过程称为重绘.
回流，是指当render tree中部分或者全部元素的尺寸,结构或者属性发生改变时,浏览器重新渲染部分或者全部文档的过程称为回流．比如页面首次渲染，浏览器窗口大小发生改变，元素尺寸或者位置发生改变，或者元素内容发生变化，字体大小变化，或者删除添加可见的DOM元素，甚至激活CSS伪类都会导致回流．
回流发生的话,一定会重绘,但是重绘的话不一定会回流!
有时候，仅仅回流一个单一的元素，它的父元素以及跟随着的元素也会回流，如今的浏览器为了对频繁的回流与重绘操作进行优化，会维护一个队列，将所有引起回流与重绘的操作放入队列中，若队列中的任务数量或者时间间隔达到一定的阈值，浏览器就会将队列进行一次批处理性的清空，这样就可把多次的重绘与回流变成一次．
但是当访问到：clientwidth,clientHeight,clientTop,clientLeft,offsetWidth,offsetHeight,offsetTop,offsetLeft,scrollWidth,scrollHeight,scrollTop,scrollLeft,width,height,getComputedStyle()以及getBoundingClientRect()
这里顺便说下,clientWidth的实际宽度是width＋左右padding,clientHeight的视角高度是height＋上下padding,clientLeft的实际宽度是border.left．offsetWidth的实际宽度是width+左右padding+左右border,而offsetHeight的实际高度是,height+上下padding+上下border,offsetTop的实际宽度是当前元素上边框外边缘到最艰难的已定位父级上边框内边缘的距离,若父级都没有定位,则分别是body顶部和左边的距离.offsetLeft是指当前元素左边框外边缘到最近已定位父级左边框内边缘的距离,如果父级都没有定位,则分别是到body顶部和左边的距离.
scrollWidth,是指指定标签内容层的真实宽度,scrollHeight是指定标签内容层的实际高度,scrollTop是指内容层层顶部到可视区区域顶部的距离,scrollLeft是指内容层左侧到可视区左端的距离.
遇到上述的，因为队列中可能会有影响到这些属性或者方法返回值的操作，即使你希望获取到的信息与队列中操作引发的改变无关，浏览器也会强行清空的．
那么，我们如何避免回流这些情况呢
尽量少的使用table布局,少使用CSS表达式calc()这类的,将动画应用到position为fixed或者absolute的元素上,避免设置多层内联样式,以及尽可能在DOM树的最末端改变class.而且为了避免频繁操作样式,最好一次性地修改class或者style属性,也可以先为元素设置display:none,操作结束后再显示出来.