梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

CSS动画并不是绝对比JavaScript动画性能更优越，开源动画库Velocity.js等就展现了强劲的性能。

一、两者的主要区别

先开门见山的说说两者之间的区别。

1）CSS动画：

基于CSS的动画一般由浏览器“主线程”之外的独立线程处理，在其中执行样式、布局、绘制和 JavaScript。

使用CSS动画，允许对单个动画关键帧、持续时间和迭代进行更多控制。

但缺乏表现力，并且很难有意义地组织动画，这意味着创造动画会带来较高的复杂度和错误率。

2）JavaScript动画：

在浏览器主线程的JavaScript中运行，主线程已经忙于运行其他的JavaScript，样式的计算，布局还有绘制。线程内存在资源竞争，这实质上增加了掉帧的风险。

基于JavaScript的动画灵活性更高，完全控制元素在每个步骤，能更好的实现复杂的动画和大量的交互（例如当要求所有的元素在页面加载时顺次加载显示出来）

对于多元素多步骤的动画序列、交互拖拽动画等，用JavaScript实现则是上选。

二、页面渲染

1）步骤

为了能让动画高性能的执行，得先了解一下页面渲染。

页面渲染的一般过程为JavaScript > 计算样式 > 布局 > 绘制 > 渲染层合并。

Layout：计算每个DOM元素最终在屏幕上显示的大小和位置。页面中一个元素的布局发生变化，会联动地引发其他元素的布局发生变化。

Paint：绘制文字、颜色、边框和阴影等，也就是一个DOM元素所有的可视效果。这个绘制过程可能会在多个层上完成的。

Composite：在每个层上完成绘制之后，浏览器会将所有层按照合理的顺序合并成一个图层，然后显示在屏幕上。

2）优化

Layout(重排)和Paint(重绘)是整个环节中最为耗时的两环，所以我们尽量避免着这两个环节。

为了实现上述效果，就需要只使用那些仅触发Composite的属性。

可以选择transform和