浏览器的渲染机制如下图所示：
对于上图的流程可以总结为：
- 解析HTML，构建生成 DOM Tree。
- 解析CSS，构建生成 CSSOM Tree(css样式树)。
- 将构建生成的 DOM Tree 和 CSSOM Tree 结合，构建生成 Render Tree(渲染树)
- 回流(Reflow)：根据生成的 Render Tree 进行节点信息的计算，获取节点的几何信息(位置，大小等)及样式
- 重绘(Repaint)：根据计算和获取的信息进行整个页面的绘制。
重绘
由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、outline等), 称为重绘。
回流
当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为 回流。
重绘不一定引起回流，而回流一定会引起重绘。
会导致回流的操作：
- 页面的首次刷新
- 浏览器的窗口大小发生改变
- 元素的大小或位置发生改变
- 改变字体的大小
- 内容的变化（如：input框的输入，图片的大小）
- 激活css伪类 （如：:hover）
- 脚本操作DOM（添加或者删除可见的DOM元素）
一些常用且会导致回流的属性和方法：
- clientWidth、clientHeight、clientTop、clientLeft
- offsetWidth、offsetHeight、offsetTop、offsetLeft
- scrollWidth、scrollHeight、scrollTop、scrollLeft
- scrollIntoView()、scrollIntoViewIfNeeded()
- getComputedStyle()
- getBoundingClientRect()
- scrollTo()
如何将回流的影响降到最低：
- 如果想设定元素的样式，通过改变元素的 class 名(尽可能在 DOM 树的最末端)
- 避免设置多项内联样式
- 应用元素的动画，使用 position 属性的 fixed 值或 absolute 值
- 权衡平滑和速度
- 避免使用table布局
- 避免使用CSS的Javascript表达式(仅IE浏览器)
- 避免使用CSS表达式(列如：calc())