某些 Android 设备在渲染画布元素时速度极慢答案

【问题标题】：Some Android devices extremely slow when rendering canvas elements某些 Android 设备在渲染画布元素时速度极慢
【发布时间】：2015-04-26 22:05:18
【问题描述】：

我正在为安卓设备开发一个应用程序，发现特别是三星 Galaxy S4，在应用程序/网页使用画布时性能极差。奇怪的是，情况并非总是如此。

我已经测试了 2 个示例应用程序。

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

和

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

第一个运行良好，性能优于我的诺基亚（双核），符合预期。但是，另一个演示几乎完全没有响应，帧速率接近 1，而所有其他设备都可以正常渲染。

由于第一个应用程序运行良好而另一个应用程序运行不佳，这就引出了一个问题，为什么？第一个没有事件监听器，而另一个有触摸监听器。可能是 touchmove 不是 canvas 的原因...或者是该演示使用了一些 canvas 功能而另一个不是，因此性能很差。

我已经阅读了很多关于这个问题的主题，但似乎没有一个答案。大多数都是好几个月大了……所以我想我应该做一个新话题。

有什么办法可以解决三星 S4 上的画布问题...以及可能其他运行 4.2.x 的 android 设备。如果这里有任何 StackOverflow 用户有 S4，你能测试两个演示并确认我的观察吗？

【问题讨论】：

FWIW，Samsung Tab 2 和 Samsung Note 3 都在点上被破坏，在鱼缸上很好。
在我的 S4 上试试这个。
在我的 S4 上试试这个。第一个链接，鱼缸，在 20 条鱼的情况下达到 60 FPS，在 1000 条鱼的情况下达到 8 FPS。第二个链接，在纵向模式下明显慢，在横向模式下更快。第二个链接如何获取 FPS？
您好，感谢您帮助测试。第二个没有 fps 计数器。我将它复制到我的服务器并编辑它的源以添加 fps 计数器。 migrainepal.com/cordova_app/touch_demo 我有一种预感，它在 15fps 左右，这没问题……这意味着事件处理不是 S4 性能缓慢的原因。我正在开发的实际应用程序在这里有问题：migrainepal.com/cordova_app/index.html# 在浏览器和其他设备上运行速度很快，在 S4 上......它非常滞后:(点击拖动图表和点。最后它将被打包使用科尔多瓦。
性能取决于 Android 版本、手机固件（不同的固件，如 CyanoGen、SlimSaberKat、Samsung Stock、Google Play 版本...使用不同的 GPU 配置）当然还有所使用的浏览器（铬/AOSP）。如果您使用的是 chrome 浏览器，请查看chrome://gpu，看看您是否使用的是加速硬件画布。

标签： javascript android html mobile canvas

【解决方案1】：

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

固件上的 Android 浏览器不支持requestAnimationFrame，而是使用setTimeout，将一秒除以以Hz 为单位的指定帧速率，在正常事件循环中执行渲染。

setTimeout 不会在请求的确切时间（以毫秒为单位）执行，而是在指定的时间将事件排入循环中。如果事件循环被页面上的其他 javascript 挂起，或者单核设备决定其他更重要的事情，则运行时非常容易在没有requestAnimationFrame API 的情况下被取消优先级，并且使用setTimeout 排队的回调会结结巴巴。 More on setTimeout resolution and timing.

不幸的是，如果您 (1) 使用这种基于 Canvas 的方法和 (2) 在不支持 requestAnimationFrame 的平台上使用，那么您将受到事件队列的支配。 Here is the reference table 了解哪些浏览器支持该功能。

干杯！

【讨论】：