浏览器渲染原理
- html代码会被解析成dom树，同时css代码会解析成css规则树
- dom树和css规则树会组合成渲染树
- 我们浏览器就会根据渲染树来进行绘制
重绘：
就是当代码发生改变时，制造成渲染树的改变，这样就会发生重新绘制，一般是颜色，背景颜色等等
回流：
就是代码直接造成DOM树的改变，也间接导致渲染树重新绘制，一般指是尺寸相关，以及display
触发条件：
- 添加或删除可见的DOM元素
- 元素的位置发生变化
- 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
- 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
- 页面一开始渲染的时候（这避免不了）
- 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）
如何减少重绘和回流：
- 当我们需要给DOM树上添加一堆的DOM节点的时候，可以用DocumentFragment
- 如果你要改变多个属性，最好将这些属性定义在一个class中，直接修改class名，这样只用引起一次回流
- 尽量让有动画的元素脱标（脱离文档流），避免对其他元素造成影响
