浏览器三种不同的渲染方式
在浏览器中，有三种不同的渲染方式（如图所示）：
第一种，例如：div.remove() ，会触发当前消失，其他元素 relayout
第二种，例如：改变颜色，直接 repaint + composite
第三种，例如：改变改变 transform ，只需 composite
image.png
那么，以html为例， 浏览器获取到html后，如何渲染页面呢？
1.根据html文件构建DOM树和CSSOM树。构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕，再继续构建DOM树及CSSOM树。
2.构建渲染树（Render Tree），渲染树的构建过程就是合并树的过程。首先从DOM根节点根节点开始遍历每个在HTML和CSS意义上的可见节点。然后对于每个可见节点，最后为其找到适配的CSSOM并且组合他们，将每个节点（包括内容和样式）组建成render-tree。
3.页面的重绘（repaint）与重排（reflow，也有称回流）。页面渲染完成后，若JS操作了DOM节点，根据JS对DOM操作动作的大小，浏览器对页面进行重绘或是重排。
CSS 动画的两种做法（transition 和 animation）
css 实现动画的常用两种做法有 transition 和 animation。
transition
transition 主要有几个常用的功能：
- 位移 translate
- 缩放 scale
- 旋转 rotate： 可以实现三维的旋转
- 倾斜 skew
这些功能一般都需要配合 transition 过渡。
对于复杂的多重效果，需要补充中间帧。
其缩写语法如下：
transition: 属性名 时长 过渡方式 延迟
transition: left 200ms linear
transition: left 200ms, top 400ms 可以用逗号分隔两个不同的属性
transition: all 200ms 可以用 all 代表所有属性
过渡方式有：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps
animation
animation 的关键语法是有一个keyframes 来定义动画：
其语法如下：
@keyframes name{
0%{top:0;}
20%{top:5px;}
60%{top:10px;}
100%{top:5px; top:20px;}
}
来显示多个渐变的过程。
animation 的缩写语法如下:
animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名;
时长：1s 或 1000ms
过渡方式：跟 transition 取值一样
次数：3 或者 2.4 或者 infinite
方向：reverse | alternate | alternate-reverse
填充模式：none | forwards | backwards | both
是否暂停：paused | running
以上所有属性都有对应的单独属性
相比之下，用animation更为方便和灵活。尤其是对于有多个中间状态的，相比之下，transition 非常复杂啰嗦。
