一些Android设备在渲染画布元素时极其缓慢。

Question

我正在开发一款安卓设备的应用程序，发现三星Galaxy S4在使用canvas时性能非常差。但奇怪的是，情况并非总是如此。

我测试了两个示例应用程序：

http://ie.microsoft.com/testdrive/Performance/FishIETank/Default.html

和

http://ie.microsoft.com/testdrive/Graphics/TouchEffects/Default.html

第一个运行良好，并且表现优于我的Nokia（双核），这是预期的。然而，另一个演示几乎完全无响应，帧速率接近1，而所有其他设备都可以渲染它。

由于第一个应用程序运行良好，而另一个应用程序不行，这引出了疑问，为什么？第一个没有事件侦听器，而另一个具有触摸侦听器。是触摸移动而非canvas导致的问题...还是该演示正在使用其他演示没有使用到的canvas功能，因此性能差？

我阅读了许多关于此问题的主题，但似乎没有答案。大多数都是几个月前发布的...所以我想发一个新主题。

有没有办法解决Samsung S4上的canvas问题...以及其他运行4.2.x的安卓设备。如果这里有StackOverflow用户拥有S4，可以测试两个演示并确认我的观察结果吗？

- Rainer Plumer

---

就此而言，三星Tab 2和三星Note 3在点阵游戏中表现不佳，但在鱼缸游戏中表现良好。 - jdphenix

在我的S4上试一下。 - Daniel Nugent

在我的S4上尝试了一下。第一个链接，鱼缸，在20条鱼的情况下最高帧率为60FPS，1000条鱼时为8FPS。第二个链接，在纵向模式下明显较慢，在横向模式下更快。如何在第二个链接上获取FPS？ - Daniel Nugent

性能取决于Android版本、手机固件（不同的固件如Cyanogen、SlimSaberKat、三星原厂、Google Play版本等，使用不同的GPU配置），以及所使用的浏览器（Chrome / AOSP）。如果您使用Chrome浏览器，请查看chrome://gpu以查看是否正在使用加速的硬件画布。 - rupps

@rupps是正确的，我怀疑他没有使用Chrome浏览器。 - Andrew Templeton

Answer 1

我强烈怀疑这不是Canvas特定的问题，而是一个requestAnimationFrame问题。第一个动画没有尝试使用requestAnimationFrame，但第二个动画在文件this file的206行上使用了requestAnimationFrame。

Android浏览器在固件版本<=4.2上不支持requestAnimationFrame，而是使用setTimeout，将一秒钟按指定帧率（以Hz为单位）分割，以正常事件循环执行渲染。

setTimeout不会在请求的确切毫秒时间执行，而是在指定时间将事件排队到循环中。如果事件循环被页面中的其他JavaScript挂起，或单核设备决定其他事情更重要，运行时非常容易被降低优先级，没有requestAnimationFrame API，使用setTimeout排队的回调将会出现卡顿和堆积。 更多关于setTimeout分辨率和时间的信息。

很遗憾，如果你正在使用基于Canvas的方法且在不支持requestAnimationFrame的平台上，你将受到事件队列的限制。这里是参考表，可以查看哪些浏览器支持此功能。

干杯！

- Andrew Templeton