JS、CSS 动画

动画实现

• css: animation transition transform
• js: setInterval setTimeout requestAnimationFrame

优缺点对比

• JS 动画优点

  • 动画控制能力强，可以在动画播放过程中对动画进行精细控制，开始、暂停、终止、取消都是可以做到的
  • 动画效果比 css3 动画丰富，比如曲线运动，冲击闪烁，视差滚动效果，只有 js 动画才能完成
  • js 动画大多数情况下没有兼容性问题，而 css3 动画有兼容性问题

• JS 动画缺点

  • 代码的复杂度高于 CSS 动画
  • js 在动画浏览器的主线程中执行，而主线程还有其他 javaScript 脚本，样式计算、布局、绘制任务等，对其干扰可能出现阻塞从而出现丢帧的情况
  • js 动画往往需要频繁操作 DOM 的 css 属性来实现视觉上的动画效果，这个时候浏览器要不停地执行重绘和重排，这对于性能的消耗是很大的，尤其是在分配给浏览器的内存没那么宽裕的移动端。

• CSS 动画优点

  • 集中所有 DOM，一次重绘重排，刷新频率和浏览器刷新频率相同。
  • 代码简单，不可见元素不参与重排，节约 CPU
  • 部分效果可以强制使用硬件加速（通过 GPU 来提高动画性能）

• CSS 动画缺点

  • 运行过程控制较弱，无法附加事件绑定回调函数。
  • 浏览器兼容性问题

性能对比

• js 在动画浏览器的主线程中执行，而主线程还有其他 javaScript 脚本，样式计算、布局、绘制任务等，对其干扰可能出现阻塞从而出现丢帧的情况
• css 动画比 js 动画流畅的前提
  1.JS 在执行一些昂贵的任务
  2.css 动画不触发 layout 和 paint 的时候
• 以下属性的修改不会触发 layout 和paint：
  1.backface-visibility
  2.opacity
  3.perspective （设置元素被查看位置的视图）
  4.perspective-origin
  5.transfrom (变形)

CSS 动画流畅的原因

• 渲染线程分为 main thread (主线程)和 compositor thread (合成器线程)。
• 如果 CSS 动画只是改变 transform 和 opacity ，这时整个 CSS 动画得以在 compositor thread 完成（而 JS 动画则会在 main thread 执行，然后触发 compositor 进行下一步操作），所以，当在 JS 执行一些昂贵的任务时，main thread 繁忙，CSS 动画由于使用了 compositor thread 可以保持流畅。
• 在主线程中，维护了一棵 Layer 树（LayerTreeHost），管理了 TiledLayer，
• 在 compositor thread，维护了同样一颗 LayerTreeHostImpl，管理了 LayerImpl，
• 这两棵树的内容是拷贝关系。因此可以彼此不干扰，当 Javascript 在 main thread 操作 LayerTreeHost 的同时，compositor thread 可以用 LayerTreeHostImpl 做渲染。当 Javascript 繁忙导致主线程卡住时，合成到屏幕的过程也是流畅的。
• 鼠标键盘消息会被首先分发到 compositor thread，然后再到 main thread。这样，当 main thread 繁忙时，compositor thread 还是能够响应一部分消息。
• 例如，鼠标滚动时，假如 main thread 繁忙，compositor thread 也会处理滚动消息，滚动已经被提交的页面部分（未被提交的部分将被刷白）。