阅读 335

css动画和js动画

css动画:相当于补间动画,重视始末状态(适合简单动画)

优点:

  1. 性能好,浏览器会对动画进行优化,浏览器会通过合成线程把每一帧中所有的dom操作在一次回流或重绘中完成而不是占用主线程,对于隐藏的或不可见的元素,不会进行回流和重绘,减少对CPU,GPU和内存的使用
  2. 会强制开启动画加速,听过GPU来提高动画渲染性能
  3. 对于帧速表现不好的低版本浏览器,CSS3可以做到自然降级,而JS则需要撰写额外代码

缺点:

  1. 对于动画的过程控制很弱,不能进行复杂的过程控制
  2. 复杂动画代码冗长复杂
  3. css3有兼容性问题

js动画:相当于帧动画,重视过程(适合复杂动画)

优点:

  1. 对于动画过程控制能力强,可以进行很复杂的动画操作
  2. 复杂动画代码相比css动画简单
  3. 代码兼容性稍好

缺点:

  1. 会占用主线程,可能导致阻塞导致丢帧等情况
文章分类
前端
文章标签