回流与重绘这两个词语经常见到，面试中这两个词语的出现的频率也比较高，每每别人谈到回流与重绘时，哦，这个我知道，但是让我讲个因果所以然，好像嗯。。。好像我并不是懂的很彻底
什么是回流（reflow）？
Render树中部分或全部元素的尺寸、结构、或某些属性（如边距）发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。
什么是重绘（repaint）？
当元素的一部分属性发生改变并不影响它在文档流中的位置时（如： color, background-color），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
==> 从性能方面解析回流
回流会造成什么样的结果？
回流会导致页面重新渲染的一些元素，从而影响性能。
具体什么会影响回流？
我们从定义上就知道什么会影响回流，但是影响回流的因素太多，一两句话是无法全面概况，下面详细罗列出影响回流的因素有哪些
1 初次页面加载时，页面渲染初始化
2 浏览器窗口大小发生改变
3 删除或添加某个元素
4 改变某个元素对应的属性（如margin,padding,height,width,border）
5 改变某个元素的内容（如字体大小，文字数量，图片大小）
6 CSS伪类激活
7 查询某些属性或调用某些方法
- clientWidth、clientHeight、clientTop、clientLeft
- offsetWidth、offsetHeight、offsetTop、offsetLeft
- scrollWidth、scrollHeight、scrollTop、scrollLeft
- scrollIntoView()、scrollIntoViewIfNeeded()
- getComputedStyle()
- getBoundingClientRect()
- scrollTo()
如何避免回流？
CSS
- 避免使用table布局。
- 尽可能在DOM树的最末端改变class。
- 避免设置多层内联样式。
- 将动画效果应用到position属性为absolute或fixed的元素上。
- 避免使用CSS表达式（例如：calc()）。
JS
- 也可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
- 避免频繁读取会引发回流的属性，如果确实需要多次使用，就用一个变量缓存起来
- 不要将读操作与写操作放置于同一语句里面
- 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。
- 避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
此外：
使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘 。但是对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过开启硬件加速是可以提升这些动画的性能。