canvas与css3,请问下,canvas和css3动画在性能上有差距的
原因是什么
性能这个点上,单个元素的动画其实两者的差距很难看出来,不过可以不靠谱的说基于 gpu 的 css3 动画性能更好,具体得视动画的复杂度⽽定。两者在⼤量元素动画的情况下⼜如何呢。我们都知道⼤量 DOM 节点会导致性能垂直下降,如果我们需要对 10000 个 DOM 节点做动画,那么帧率可能不会可观。⽽ canvas 的⼤量 fillRect 调⽤的性能⼜会不会成为瓶颈呢?于是我们就采⽤对 10000 个元素做动画的⽅式进⾏测试:
相信很容易就能感受出来差别,那么为什么呢?
以下这段瞎扯,有误请⼤佬指正。css3 动画可以⾛ cpu 也可以⾛ gpu,transform 之类能够提供“参数”稳定的属性就能够通过 gpu 单独绘制 layer,这两种动画的性能完全不同。基于 gpu 的 css 动画,它的主要开销有:
CPU 与 GPU 通信的开销
composite 的开销
基于 cpu 的 css 动画,它的主要开销有:
layout,重新计算布局的开销
repaint,重新绘制图层的开销
composite 的开销
⽽ canvas 的主要开销主要是在:
执⾏ Javascript 的开销
Skia 绘制的开销
composite 的开销
看起来,好像好像确实是 canvas 的开销更多呀。但是由于测试⽤例中⼤量的 DOM 元素意味着⼤量图层需要进⾏合成⼯作,这才是拖垮性能的关键。svg canvas
当然,讨论完性能,更重要的区别在于两者是适应不同场景的。当我们需要对已有的复杂 DOM 元素做动画,例如整个页⾯的动画效果,我们会考虑把它绘制到 canvas 上再去做动画吗?那显然不会,成本太⾼了,这个成本倒不是指渲染的成本,⽽是我们需要“复刻”这个DOM 元素的成本;当我们需要
完成⼀些 DOM ⽆法完成的⾼表现⼒的交互时,⽐如做⼀个画板,纯粹的 DOM 能做吗?或许 SVG 是⼀个选择,那如果是更复杂的场景呢?理论上来说 css3 动画能做的canvas 都能做,反之就不是这样。
⾄于 webgl 与 canvas 的区别,他两都能做 3D 也都能做 2D,只是谁更适合⽽已。性能上来说,⼤部分情况下 webgl ⾼出不少,毕竟直接⾛ gpu。canvas 在图像合成上也会⾛ gpu,其他的 API 还是在 cpu 通过 skia 绘制。虽然 webgl 性能好,但是学习门槛⾼多了,如果不⽤现有的库开发,需要不少的数学和图形学知识。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。