浏览器渲染机制
- 浏览器获取到HTML，解析生成DOM树，获取到CSS，生成CSSOM树
- 将DOM树和CSSOM树结合，生成Render Tree（渲染树）
- Layout（回流）
- Painting（重绘）
- Display：将渲染之后的元素展示在页面
Layout（回流/重排）
当 Render Tree 中的一部分（或者全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流
Painting（重绘）
当 Render Tree 中的一些元素需要更新属性时，而这些属性只影响元素的外观，风格，而不会影响布局时，就叫做重绘。
如何触发回流
注：回流一定会重绘，但是重绘不一定回流
- 页面第一次加载
- 元素尺寸改变（字体颜色，元素背景等只触发重绘）
- 元素位置改变
- 元素内容改变（文本换成图片，input输入时）
- 添加/删除可见DOM元素（元素display:none不会发生重排；visibility:hidden显示/隐藏不影响重排）
- 浏览器窗口尺寸改变
- 计算 offsetWidth/offsetHeight 等操作时
如何优化
CSS优化：
- 使用 transform 代替 定位使用 （top）
- 使用 visibility 替换 display:none，前者只会引起重绘，后者会发生回流（布局改变）
- 避免使用 table 布局方式（可能很小的一个改动会造成整个table的重新布局）
- 尽可能在DOM树的最末端改变class（回流是不可避免的，但可以减少其影响。尽可能在DOM树的最末端改变class，可以限制了回流的范围，使其影响尽可能少的节点）
- 避免设置多层内联样式，CSS 选择符从右往左匹配查找，避免节点层级过多（例：div>span>em）
- 将动画效果应用到position属性为absolute或fixed的元素上（避免影响其他元素的布局，这样只是一个重绘，而不是回流，同时，控制动画速度可以选择 requestAnimationFrame）
- 避免使用CSS表达式，可能会引发回流
- 将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点，例如will-change、video、iframe、canvas等标签，浏览器会自动将该节点变为图层
- 启用CSS3 硬件加速（GPU加速），使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘 。但是对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能
JS优化：
- 避免频繁操作样式，（最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性）
- 避免频繁操作DOM（创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中）
- 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来
参考文档：
