动画实现
- 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 也会处理滚动消息，滚动已经被提交的页面部分（未被提交的部分将被刷白）。
网友评论