JS动画与CSS动画
一、JS动画(setInterval setTimeOut requestAnimationFrame)
优点:
1)过程控制能力强。可以对动画工程进行精准的控制,暂停、取消、开始、终止都可以。
2)动画效果多、炫酷。有一些效果是CSS动画所不能实现的
3)兼容性比较高
缺点:
1)由于JS是通过不断的操作DOM和CSS的属性来实现动画效果的,这需要不断的重排(reflow)和重绘(repaint),非常消耗浏览器的内存。(在PC端有浏览器可以分配的内存比较大,动画的重排(reflow)和重绘(repaint)可以忽略不计,但是在移动端效果非常明显)
2)JS动画在主线程中执行,由于主线程中还有其他的JavaScript脚本等需要执行,对主线程进行干扰有可能造成丢帧的问题。
3)较CSS动画复杂
4)由于JS动画的异步处理导致动画开始执行的时间不能准确控制
二、CSS动画(transition transform animation)
优点:
1)浏览器可以进行优化
如何优化:
① 浏览器使用与requestAnimationFrame 类似的机制,比起比起setTimeout,setInterval设置动画的优点是
*requestAnimationFrame 会把一帧中的所有DOM操作集中起来,在一次重绘或者回流中就完成。并且刷新频率与浏览器相同
*在隐藏或不可见的元素中requestAnimationFrame不会进行重绘或者回流,所以会使用更少的CPU GPU和内存使用量
② 部分属性能够启动3D加速和GPU硬件加速(通过GPU来提高动画性能),例如使用transform的translateZ进行3D变换时
2)代码简单,性能调优方向固定。
3)对于帧速表现不好的低版本浏览器,CSS3可以做到自然降级,而JS则需要撰写额外代码
缺点:
1)对动画工程无法控制,只能在特定场合暂停取消,不能添加回调函数
2)兼容性不好
三、性能问题
1、CSS 2D矩阵动画效率高于js利用margin和left,top模拟的矩阵动画(CSS3的2D动画是指是2D矩阵Transform变化,比如缩放\变形\x轴\y轴(js当然是不能做变形动画的))
例如,使用CSS3的transform做translateXY动画比js中的position left,position right快了近700mm!而且也更流畅
2、CSS3其它常规动画属性的效率均低于js模拟的动画(常规动画属性在这里是指:height,width,opacity,border-width,color…..)
四、
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也会处理滚动消息,滚动已经被提交的页面部分(未被提交的部分将被刷白)。
CSS动画比JS流畅的前提:
- JS在执行一些昂贵的任务
- 同时CSS动画不触发layout或paint
在CSS动画或JS动画触发了paint或layout时,需要main thread进行Layer树的重计算,这时CSS动画或JS动画都会阻塞后续操作。
只有如下属性的修改才符合“仅触发Composite,不触发layout或paint”:
- backface-visibility
- opacity
- perspective
- perspective-origin
- transfrom
所以只有用上了3D加速或修改opacity时,css3动画的优势才会体现出来。
(2)代码相对简单,性能调优方向固定
(3)对于帧速表现不好的低版本浏览器,CSS3可以做到自然降级,而JS则需要撰写额外代码
总结:所以简单的不需要对中间过程进行过多控制的使用CSS动画;效果交互复杂的使用JS动画