请问下，canvas和css3动画在性能上有差距的原因是什么

Question

canvas和css3动画在性能上有差距的原因是什么，偏原理一点，
顺便还有webgl和canvas的区别，谢谢大哥们

Answer 1

CSS3 的 animation 与 HTML5 的 Canvas 应用的场景并不相同，如果一些简单的动画在 animation 里会比较适合而且很难有复杂交互， canvas 的话功能会多很多但是需要 Js 脚本配合。
性能问题的话，我个人觉得CSS3的动画会比 webGL 消耗小一些，后者需要CPU计算然后再给到GPU，但是可再变动的空间就很小，比如一些随即动作或者跟随效果。

之前有一个项目同时渲染2500个随机元素的场景下( i5 + GTX 960 )，使用 canvas 的 FPS 在 25 帧左右，而使用 CSS 3D Sprite 可以维持在 45 左右的帧数。

当然我觉得如果在复杂动画下 animation 可能一直会操作DOM改变Style，所以并不如 canvas ，后者直接重绘画布内容即可。

之前有过一篇对比文章你可以看一下 css3 animation 和 html5 canvas 性能比较（转自SO）

Answer 2

CSS动画的计算在浏览器内部（使用C/C++）实现，canvas的计算需要在js中完成。
webgl也可以很快，写成shader就会快很多。比如这个：https://www.shadertoy.com/vie...

Answer 3

canvas 相当于提供了一个画板，开发者用JS操作其2D绘图上下文就可以画图，非常自由。连续擦除并重绘图像就成了动画，但图像的计算需要时间，所以代码写不好帧率就会下降，也就是会卡顿。

CSS Animation 则是由浏览器实现的。开发者准备好一些关键帧，并给元素加上包含这些关键帧的动画属性，浏览器就会自动将元素从一帧渐变到另外一帧。因为是浏览器原生实现，所以性能较canvas而言会好一些，而且部分情况可以启动GPU计算，性能更上一层楼。

前面说了canvas的2D绘图上下文，是为了区别于其3D绘图上下文，也就是webGL。webGL支持GPU渲染3D图形，但是3D最终也得用2D表现出来，所以绝大部分成熟的canvas动画库都支持开启硬件加速，原理就是用 webGL 来渲染2D图形。

Answer 4

性能这个点上，单个元素的动画其实两者的差距很难看出来，不过可以不靠谱的说基于 gpu 的 css3 动画性能更好，具体得视动画的复杂度而定。两者在大量元素动画的情况下又如何呢。我们都知道大量 DOM 节点会导致性能垂直下降，如果我们需要对 10000 个 DOM 节点做动画，那么帧率可能不会可观。而 canvas 的大量 fillRect 调用的性能又会不会成为瓶颈呢？于是我们就采用对 10000 个元素做动画的方式进行测试：

css3 移动动画
canvas 移动动画

相信很容易就能感受出来差别，那么为什么呢？

以下这段瞎扯，有误请大佬指正。css3 动画可以走 cpu 也可以走 gpu，transform 之类能够提供“参数”稳定的属性就能够通过 gpu 单独绘制 layer，这两种动画的性能完全不同。基于 gpu 的 css 动画，它的主要开销有：

• CPU 与 GPU 通信的开销
• composite 的开销

基于 cpu 的 css 动画，它的主要开销有：

• layout，重新计算布局的开销
• repaint，重新绘制图层的开销
• composite 的开销

而 canvas 的主要开销主要是在：

• 执行 Javascript 的开销
• Skia 绘制的开销
• composite 的开销

看起来，好像好像确实是 canvas 的开销更多呀。但是由于测试用例中大量的 DOM 元素意味着大量图层需要进行合成工作，这才是拖垮性能的关键。

当然，讨论完性能，更重要的区别在于两者是适应不同场景的。当我们需要对已有的复杂 DOM 元素做动画，例如整个页面的动画效果，我们会考虑把它绘制到 canvas 上再去做动画吗？那显然不会，成本太高了，这个成本倒不是指渲染的成本，而是我们需要“复刻”这个 DOM 元素的成本；当我们需要完成一些 DOM 无法完成的高表现力的交互时，比如做一个画板，纯粹的 DOM 能做吗？或许 SVG 是一个选择，那如果是更复杂的场景呢？理论上来说 css3 动画能做的canvas 都能做，反之就不是这样。

至于 webgl 与 canvas 的区别，他两都能做 3D 也都能做 2D，只是谁更适合而已。性能上来说，大部分情况下 webgl 高出不少，毕竟直接走 gpu。canvas 在图像合成上也会走 gpu，其他的 API 还是在 cpu 通过 skia 绘制。虽然 webgl 性能好，但是学习门槛高多了，如果不用现有的库开发，需要不少的数学和图形学知识。