相关疑难解决方法(0)

HTML5 Canvas在Chrome上速度较慢,但​​在FireFox上速度较快

我正在具有4 GB RAM的双核2.8 GHz Pentium Windows 7系统上测试Chrome 15.0.874.106m(具有大量内存的高度加速的视频卡),并且正在单核上测试FireFox 7.0.1具有2 GB RAM的1.6 GHz Athalon Windows Vista笔记本电脑。但是,FireFox系统的性能要比Chrome系统好大约10倍(根据我的视觉估计,它是FPS的10倍)。

我看到的大多数帖子在FireFox和Chrome上的运行速度都还不错,但是在这里我似乎遇到了严重的逆转。关于什么可能对此负责的任何想法?我正在测试的HTML文件(单个文件,没有依赖项)约为33 MB(压缩后为16 MB),可在此处获得

这是对小文件与大文件的HTML5 canvas性能的跟踪。

我发现chrome:// tracing可以帮助我通过chrome profiler运行问题文件来获取这些配置文件结果:

编辑: 结果已删除,我得到了一些更有趣的新结果,我将在新部分中进行介绍(请参见下文)。 结束编辑

我还发现了--show-fps-counter,它显示了大约3.5 FPS的滚动速度。但是我仍然不清楚问题出在哪里。

我还找到了--use-gl开关,并尝试了台式机,例如egl和osmesa。对于osmesa,性能似乎最好,但几乎没有。我不知道确切多少,因为show-fps-counter开关显然不能与use-gl = osmesa一起使用。在其他系统上,osmesa的性能仍然不如FireFox差。

编辑续:由于事件处理中的偶然事件,我以某种方式进入了一种模式,无需按住鼠标键即可滚动地图。令我震惊和惊讶的是,它的滚动非常平稳!通过进行一些其他编辑(即,删除处理mouseup事件的代码),我切换了代码,因此不再需要按住按钮来滚动。瞧,只要不按住鼠标按钮,我就可以持续非常流畅地滚动。因此,我在使用chrome:// tracing的情况下(没有按住鼠标按钮的情况下)来分析/跟踪了行为。我的结果如下。

无需按住鼠标键即可平滑滚动:

选择摘要:
 RenderWidget :: OnHandleInputEvent:1340.968ms 212次出现
 RenderWidget :: InvalidationCallback:7.867ms 27次出现
 RenderWidget :: OnUpdateRectAck:1.319ms 173次出现
 RenderWidget :: OnSwapBuffersComplete:129.018ms 173次出现
 V8EventListener :: callListenerFunction:1306.923ms 173次出现
 RenderWidget :: DoDeferredUpdate:120.033ms 204次
 EarlyOut_UpdateReplyPending:0.004ms 4次
 EarlyOut_SwapStillPending:0.181ms 165次出现
 CommandBufferHelper :: WaitForToken:8.358ms 3次
 WebViewImpl :: layout:1.24ms 190次
 CCLayerTreeHost …

javascript performance firefox google-chrome html5-canvas

5
推荐指数
1
解决办法
6520
查看次数