渲染画布元素时，一些Android设备的速度极慢 [英] Some Android devices extremely slow when rendering canvas elements

问题描述

林开发Android设备的应用程序，并发现三星Galaxy S4具体而言，具有性能极差，当应用程序/网页使用的画布。 奇怪的是，它的情况并非总是如此。

Im developing an app for android devices, and found that samsung galaxy S4 specifically, has extremely poor performance when app/web page uses canvas. Odd thing is, that its not always the case.

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

I have tested 2 sample apps.

<一个href="http://ie.microsoft.com/testdrive/Performance/FishIETank/Default.html">http://ie.microsoft.com/testdrive/Performance/FishIETank/Default.html

和

<一个href="http://ie.microsoft.com/testdrive/Graphics/TouchEffects/Default.html">http://ie.microsoft.com/testdrive/Graphics/TouchEffects/Default.html

第一个正常工作，而且比我的诺基亚（这是双核），并预期。但是，其他的演示，几乎完全没有反应，帧率接近于1，在所有其他设备使其罚款。

the first one works fine, and outperforms my Nokia (which is dual core) and is expected. However, the other demo, is almost completely unresponsive and framerate is close to 1, where as all other devices render it fine.

由于第一个应用程序运行良好，另外一个犯规，这贝格斯的问题，为什么呢？ 第一个没有事件侦听器，其中作为另一种具有触摸听众。可以touchmove是原因，而不是帆布...或者是使用一些画布功能的另一个未启用该演示，并且因此具有差的性能。

Since the first app runs well and the other one doesnt, it beggs the question, why ? First one has no event listeners, where as the other one has touch listeners. Could touchmove be the cause instead of canvas...or is that demo using some canvas features that the other one isnt, and thus has poor performance.

我已经阅读了大量的主题关于这个问题，没有人可以回答。大多数有很多个月大......所以我想生病使一个新的话题。

I have read lots of topics about this issue, and none seem to have answer. Most are many months old...so i thought ill make a new topic.

有什么办法来解决三星S4画布问题......可能还有其他的Andr​​oid设备上运行4.2.x. 如果有StackOverflow的用户在这里有S4，你能同时测试的演示，并确认我的观察？

Is there any way to solve the canvas issue on Samsung S4 ... and potentially other android devices running 4.2.x. If any StackOverflow users here has S4, can you test both demos and confirm my observations?

推荐答案

我强烈怀疑这是不是一个特定的画布问题，而是一个 requestAnimationFrame 的问题。第一个动画不会尝试使用 requestAnimationFrame ，但第二个呢，的这个文件 行206 。

I strongly suspect this is not a Canvas specific issue, but a requestAnimationFrame issue. The first animation does not attempt to use requestAnimationFrame, but the second does, in this file on line 206.

上的固件和其中Android浏览器= 4.2的不支持的 requestAnimationFrame ，而是使用的setTimeout ，将一个二经指定的帧速率在赫兹，它执行使得在正常事件循环。

Android Browser on firmwares <= 4.2 does not support requestAnimationFrame, and instead uses setTimeout, dividing one second by specified frame rate in Hz, which executes renders in the normal event loop.

的setTimeout 未在要求毫秒的准确时间执行，但在入队的循环在指定时间的事件。如果事件循环挂其他的JavaScript的网页上，或在单核设备决定别的更重要的是，在运行时的非常的容易去优先无使用的setTimeout 将口吃和一堆requestAnimationFrame API和回调入队。 更多关于的setTimeout 分辨率和时间

setTimeout does not execute at the exact time in milliseconds requested, but enqueues the event in the loop at the time specified. If the event loop is hung by other javascript on the page, or the single-core device decides something else is more important, the runtime is very vulnerable to de-prioritization without the requestAnimationFrame API, and the callbacks enqueued using setTimeout will stutter and bunch. More on setTimeout resolution and timing.

不幸的是，你在事件队列的摆布，如果你是：（1）本帆布为基础的方法和（2）在不支持的平台 requestAnimationFrame 。 下面是引用表什么浏览器都支持该功能。

Unfortunately, you are at the mercy of the event queue if you are (1) going with this Canvas-based approach and (2) on a platform that does not support requestAnimationFrame. Here is the reference table for what browsers support the feature.

干杯！

这篇关于渲染画布元素时，一些Android设备的速度极慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！