某些 Android 设备在渲染 canvas 元素时速度极慢
Some Android devices extremely slow when rendering canvas elements
我正在为 android 设备开发一个应用程序,发现当 app/web 页面使用 canvas 时,三星 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 功能而另一个没有,因此性能不佳。
我已经阅读了很多关于这个问题的主题,none 似乎有答案。大多数都已经好几个月了...所以我觉得我想开个新话题。
有什么方法可以解决三星 S4 上的 canvas 问题……以及其他 android 设备 运行 4.2.x。
如果这里的 Whosebug 用户有 S4,你能测试这两个演示并确认我的观察吗?
我强烈怀疑这不是 Canvas 特定问题,而是 requestAnimationFrame
问题。第一个动画不尝试使用 requestAnimationFrame
,但第二个动画在 line 206
上的 this file 中尝试使用
Android 固件 <= 4.2 上的浏览器 不支持 requestAnimationFrame
,而是使用 setTimeout
,将一秒除以指定的帧以 Hz 为单位的速率,在正常事件循环中执行渲染。
setTimeout
不会在请求的准确时间(以毫秒为单位)执行,而是在指定的时间将事件排入循环中。如果事件循环被页面上的其他 javascript 挂起,或者单核设备决定其他事情更重要,则运行时 非常 容易受到降优先级的影响requestAnimationFrame
API 和使用 setTimeout
排队的回调会断断续续。 More on setTimeout
resolution and timing.
不幸的是,如果您 (1) 使用这种基于 Canvas 的方法并且 (2) 在不支持 requestAnimationFrame
的平台上,您将受制于事件队列。 Here is the reference table哪些浏览器支持该功能。
干杯!
我正在为 android 设备开发一个应用程序,发现当 app/web 页面使用 canvas 时,三星 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 功能而另一个没有,因此性能不佳。
我已经阅读了很多关于这个问题的主题,none 似乎有答案。大多数都已经好几个月了...所以我觉得我想开个新话题。
有什么方法可以解决三星 S4 上的 canvas 问题……以及其他 android 设备 运行 4.2.x。 如果这里的 Whosebug 用户有 S4,你能测试这两个演示并确认我的观察吗?
我强烈怀疑这不是 Canvas 特定问题,而是 requestAnimationFrame
问题。第一个动画不尝试使用 requestAnimationFrame
,但第二个动画在 line 206
上的 this file 中尝试使用
Android 固件 <= 4.2 上的浏览器 不支持 requestAnimationFrame
,而是使用 setTimeout
,将一秒除以指定的帧以 Hz 为单位的速率,在正常事件循环中执行渲染。
setTimeout
不会在请求的准确时间(以毫秒为单位)执行,而是在指定的时间将事件排入循环中。如果事件循环被页面上的其他 javascript 挂起,或者单核设备决定其他事情更重要,则运行时 非常 容易受到降优先级的影响requestAnimationFrame
API 和使用 setTimeout
排队的回调会断断续续。 More on setTimeout
resolution and timing.
不幸的是,如果您 (1) 使用这种基于 Canvas 的方法并且 (2) 在不支持 requestAnimationFrame
的平台上,您将受制于事件队列。 Here is the reference table哪些浏览器支持该功能。
干杯!