动画实现形式：
javascript 直接操作dom
css: trastion,animation
canvas + js
60Hz和60fps是什么关系
没有任何关系。fps代表GPU渲染画面的频率，Hz代表显示器刷新屏幕的频率。一幅静态图片，你可以说这副图片的fps是0帧/秒，但绝对不能说此时屏幕的刷新率是0Hz，也就是说刷新率不随图像内容的变化而变化。游戏也好浏览器也好，我们谈到掉帧，是指GPU渲染画面频率降低。比如跌落到30fps甚至20fps，但因为视觉暂留原理，我们看到的画面仍然是运动和连贯的。
CSS动画
Transitions
Animation
总结
优点：
1) 简单、高效
2) 声明式的
3) 不依赖与主线程，采用硬件加速（GPU）参看层的创建
4) 简单的控制keyframe animation 播放和暂停
缺点：
1) 不能动态的修改或定义动画内容
2) 不同的动画无法实现同步
3) 多个动画彼此无法堆叠
requestAnimationFrame
优点：
1) 在每次浏览器更新页面时，能获取通知并执行应用。 简单理解为，RAF能在每个16.7ms间执行一次咱们的函数，不多不少。
2) 最小化的消耗资源，RAF在页面被切换或浏览器最小化时，会暂停执行，等页面再次关注时，继续执行动画。
3) 相比 CSS 动画有更好的掌控，能合理降低CPU的使用。
缺点：
1) 无法控制执行时间，执行时间由系统根据屏幕刷新时间决定
2) 浏览器兼容性问题，IE10+及现代浏览器，低版本浏览器建议降级处理，使用setInterval或setTimeout
SVG动画
优点：
1) 矢量图形，不受像素影响——SVG的这个特性使得它在不同的平台或者媒体下表现良好，无论屏幕分辨率如何
2) SVG对动画的支持较好，其DOM结构可以被其特定语法或者Javascript控制，从而轻松的实现动画
3) Javascript可以完全控制SVG Dom 元素
4) SVG的结构是XML，其可访问性（盲文、声音朗读等）、可操作性、可编程性、可被CSS样式化完胜Canvas。另外，其支持 ARIA 属性，使其如虎添翼。
缺点：
1) DOM比正常的图形慢，而且如果其结点多而杂，就更慢。
2) SVG 画点报表什么的，还行；在网页游戏前，就束手无策了；当然可以结合 Canvas + SVG实现。
3) 不能动态的修改动画内容
4) 不能与HTML内容集成
5) 整个SVG作为一个动画
6) 浏览器兼容性问题，IE8-以及Android 2.3默认浏览器是不支持SVG
Web Animations
结论
渲染流程：
script —–> layout —–> paint —–> composite
计算 －－－》 重排 －－－－》 绘制 －－－－》 合并
重排一定引起重绘；
层可以减少重绘对其他元素的影响；
层的数量不要太多