通过 CSS 与 HTML5 Canvas 在网页上移动图像的性能答案

【问题标题】：Performance of moving image on web page via CSS vs HTML5 Canvas通过 CSS 与 HTML5 Canvas 在网页上移动图像的性能
【发布时间】：2011-06-18 02:10:55
【问题描述】：

我有一张图片，可以像这样在我的网页 (JavaScript) 中移动它：

satelliteImage.style.top = coordinates.top + "px";
satelliteImage.style.left = coordinates.left + "px";

不幸的是，除了 Chrome 之外，所有浏览器的性能都很差。瓶颈是渲染速度。我对IE没有希望，但至少我想改进Firefox。与样式更改相比，是否有人在移动图像时体验过 HTML5 Canvas 的性能？

【问题讨论】：

标签： javascript html animation canvas css

【解决方案1】：

我创建了等效的测试来比较通过 CSS 移动图像和在 HTML 画布上绘制图像的帧速率。以下是测试：

Moving an Image via Canvas
Moving an Image via CSS
Moving 20 Sprites via Canvas 在 1024x768 背景上
Moving 20 Sprites via CSS 在 1024x768 背景上

这里是the FPS results（测试详情见网址）：

图像图像精灵精灵浏览器画布 CSS 画布 CSS ---------------------------------------------- Safari v5.0.3 59 95 59 89 火狐v3.6.13 59 95 60 90 火狐v4.0b8 75 89 78 82 铬 v8.0 108 230 120 204 iPad，水平 17 44 2 14 iPad，垂直 4 75 2 15

如你所见：

与重绘画布的一部分相比，将图像作为 HTML 元素移动总是会获得更好的结果，并且
如果你只有 5 fps，你可能可能做错了。

编辑：添加了在背景上移动 20 个小动画精灵的测试。结论保持不变。

【讨论】：

感谢 Phrogz 的出色测试。可悲的是，我没有做错任何事。例如，当背景图像加载时，帧速率会急剧下降。我什至没有将图像移到它上面，而是在背景顶部的完全不同的图像上移动。两者都是具有很多透明度的PNG，带有阴影的文本，框阴影，圆角等。您在完美的环境下进行了测试。然而，它非常清楚地表明了这一点。再次感谢！
我想到了一些我可能做错的事情。我使用负坐标将对象带到其父区域之外。我记得我在执行此操作时遇到了某些浏览器的渲染问题。我在正确的轨道上吗？我今天将对此进行测试。
这就是问题所在，如果你有一个包含很多视觉效果的复杂页面，由于它的绘制和遗忘性质，画布速度会降低很多，CSS 需要记住所有节点。这东西很复杂。我的经验特别是在游戏性能（大量动画图像）方面，画布的性能很容易胜过任何 DHTML。
@JakubHampl 我添加了针对 20 个动画精灵 (44x70) 在 1024x768 静态背景图像上移动的测试。结果没有改变：让本机浏览器编写结果比尝试在 JavaScript 中自己编写结果要快。
@Phrogz 够公平的。看来我之前的评论是完全错误的 :( 如果@avok00 可以发布他的代码，这样我们就可以看到为什么他的帧率如此之低。

【解决方案2】：

现在已经 2 年多了，我决定运行这些测试，看看这是否仍然适用。它确实......但它没有。

Firefox 桌面版和移动版运行 CSS 动画的速度都比画布快得多。
Chrome 桌面运行画布和 CSS 动画大致相同
Chrome Mobile（在 Nexus 7 上）正好相反：画布的运行速度明显快于 CSS！

（在 1920x1080 分辨率的 Linux 上使用 Firefox Android 和 Nexus 7 和桌面浏览器）

浏览器/操作系统画布图像 CSS 图像画布 Sprites CSS Sprites ----------- ------------ ---------- -------------- --- -------- 火狐16 56.7fps 215.6 fps 59.2fps 203.6fps 火狐 16 安卓 17.1 fps 179.6fps 11.5fps 35.7 铬 22 192.3fps 223.5fps 170.1fps 164.3fps Chrome 安卓 48.3fps 39.9fps 92.8fps 13.1fps

其他人得到什么？任何人都可以为此测试 IE9、10 吗？

【讨论】：

我刚刚在 ubuntu 系统上的 firefox 21 上运行了测试。除了 CSS Sprites 实际上下降到大约 120fps 之外，我每次测试都得到大约 220fps。

【解决方案3】：

我想我会用我在第三代 iPad 上的发现来更新这个老问题：

Canvas 以 2:1 获胜，精灵动画平均约 120 fps，背景清除双向切换。 CSS 几乎无法达到 60 fps。

对于单张图片，CSS 肯定更快。

【讨论】：

值得看看我下面的答案，为什么这可能......并且可能更像是类似的测试结果。

【解决方案4】：

根据我使用 Canvas 的经验，您应该能够在 Firefox 上获得良好的 50 fps 甚至在 iOS 上获得良好的 15 fps。 IE9 可能是最快的浏览器，其他版本并没有真正实现 Canvas。

【讨论】：

谢谢！在画布上移动图像的最快方法是什么？
@avok00 在画布上移动图像的唯一方法是清除图像所在的矩形并使用drawImage() 再次绘制它。但是，我强烈怀疑，与仅在 DOM 上移动图像相比，您的性能会明显变差。
嗯，那么 50fps 是什么？也许我可以使用 translate 来移动整个画布并获得更好的性能？
@avok00 Jakub 的电脑不是你的。编写一个简单的测试来比较性能。
这就是问题所在。我不能写一个简单的测试。我的网站很复杂，有很多图层、阴影、css3、背景图像，透明度很高。所有这些都会影响性能。我几乎必须实现它才能进行测试:) 否则我不会在这里问。顺便说一句，我的电脑非常强大。 FF 仍然不擅长移动图像。不超过 5 FPS。

【解决方案5】：

MyNameIsKo 对 iPad 3 性能的进一步发现。我想知道这是否与 CSS DOM 方法不得不担心在 iPad 3 的视网膜屏幕上绘制而画布会以较低的分辨率绘制然后 blt'd 到屏幕这一事实有关。 iPad 1 的 CSS 更新速度明显快于 iPad3！

我还对画布 javascript 进行了一些更改，以便能够绘制到视网膜分辨率画布。我在 canv.height = h; 之后添加了以下代码在 bg.onload 函数中：

if (window.devicePixelRatio) {
    ctx.canvas.style.width = w + "px";
    ctx.canvas.style.height = h + "px";
    ctx.canvas.height = h * window.devicePixelRatio;
    ctx.canvas.width = w * window.devicePixelRatio;
    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}

这大大降低了性能...

iPad 1 (iOS 5.5.1)

iPad 3 (iOS 6.1.3)

                      CSS Sprite        Canvas Sprites
-----------------------------------------------------
iPad 1                   90                  100
iPad 3                   55                  120
iPad 1(canvas changes)   n/a                 100
iPad 3(canvas changes)   n/a                 35

【讨论】：