HTML5 Canvas 在 Chrome 上很慢,但在 FireFox 上很快

HTML5 Canvas slow on Chrome, but fast on FireFox(HTML5 Canvas 在 Chrome 上很慢,但在 FireFox 上很快)

本文介绍了HTML5 Canvas 在 Chrome 上很慢,但在 FireFox 上很快的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在双核 2.8 GHz Pentium Windows 7 系统上测试 Chrome 15.0.874.106m,配备 4 GB RAM(以及具有大量内存的高度加速的视频卡),我正在测试 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 画布性能的跟进小文件和大文件.

我发现了 chrome://tracing,它帮助我通过 chrome 分析器运行问题文件获得了这些分析结果:

结果已删除,我得到了一些新的更有趣的结果,我将在新部分中描述(见下文). 结束编辑强>

我还发现了 --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::updateLayers : 34.726ms 173 次CCLayerTreeHost::commitTo : 24.426ms 173 次CCLayerTreeHostImpl::drawLayers : 24.483ms 173 次LayerRendererChromium::present : 8.434ms 173 次出现EarlyOut_NoPendingUpdate:0.018ms 17 次CommandBufferProxy::FlushSync : 8.307ms 3 次CCLayerTreeHost::updateLayers::calcDrawEtc : 15.871ms 173 次LayerRendererChromium::drawLayers : 23.441ms 173 次RenderWidget::OnSwapBuffersPosted : 0.185ms 173 次出现RendererGLContext::SwapBuffers : 4.431ms 173 次LayerRendererChromium::drawLayersInternal::calcDrawEtc : 10.783ms 173 次GpuCommandBufferStub::OnFlush : 7.581ms 3 次GpuCommandBufferStub::OnAsyncFlush : 2825.339ms 352 次GpuCommandBufferStub::OnEcho : 0.83ms 173 次出现GpuScheduler:PutChanged : 2823.239ms 355 次GLES2DecoderImpl::HandleTexImage2D : 5.779ms 6 次GLES2DecoderImpl::HandleTexSubImage2D : 1.784ms 3 次出现GLES2DecoderImpl::HandleSwapBuffers : 2387.561ms 173 次GLContext::SwapBuffers : 2384.623ms 173 次ScheduledAction::execute : 2.453ms 16 次v8.compile : 1.037ms 14 次v8.run : 3.142ms 14 次EarlyOut_NotVisible:0.021ms 14 次出现RenderWidgetHost::ForwardMouseEvent : 7.465ms 538 次RenderWidgetHost::OnMsgInputEventAck : 5.218ms 212 次RenderWidgetHost::OnMsgUpdateRect : 4.172ms 173 次RenderWidgetHost::ForwardInputEvent : 4.551ms 212 次*总计:13535.811ms 5332 次出现选择开始:986.276ms选择范围:3320.488ms

这是按住鼠标按钮时的断断续续/缓慢滚动:

<上一页>评选总结:RenderWidget::OnHandleInputEvent : 3852.921ms 61 次RenderWidget::InvalidationCallback : 4.549ms 61 次RenderWidget::OnUpdateRectAck : 1.235ms 40 次RenderWidget::OnSwapBuffersComplete : 20.684ms 40 次V8EventListener::callListenerFunction : 357.075ms 39 次RenderWidget::DoDeferredUpdate : 25.208ms 132 次EarlyOut_SwapStillPending:0.004ms 6 次EarlyOut_UpdateReplyPending:0.032ms 32 次出现CommandBufferHelper::WaitForToken : 8.09ms 3 次WebViewImpl::layout : 0.346ms 78 次CCLayerTreeHost::updateLayers : 7.805ms 40 次CCLayerTreeHost::commitTo : 4.727ms 40 次CCLayerTreeHostImpl::drawLayers : 9.449ms 40 次LayerRendererChromium::present : 1.122ms 40 次EarlyOut_NoPendingUpdate:0.038ms 38 次CommandBufferProxy::FlushSync : 8.05ms 3 次CCLayerTreeHost::updateLayers::calcDrawEtc : 3.694ms 40 次LayerRendererChromium::drawLayers : 9.177ms 40 次RenderWidget::OnSwapBuffersPosted : 0.035ms 40 次RendererGLContext::SwapBuffers : 0.684ms 40 次LayerTextureUpdaterCanvas::paint : 0.483ms 1 次出现LayerTextureSubImage::uploadWithMapTexSubImage : 0.02ms 1 次出现LayerRendererChromium::drawLayersInternal::calcDrawEtc : 2.329ms 40 次GpuCommandBufferStub::OnFlush : 7.326ms 3 次GpuCommandBufferStub::OnAsyncFlush : 226.88ms 121 次GpuCommandBufferStub::OnEcho : 0.377ms 40 次GpuScheduler:PutChanged : 230.2ms 124 次GLES2DecoderImpl::HandleTexImage2D : 5.705ms 8 次GLES2DecoderImpl::HandleTexSubImage2D : 2.057ms 4 次GLES2DecoderImpl::HandleSwapBuffers : 113.857ms 40 次GLContext::SwapBuffers : 113.377ms 40 次ScheduledAction::execute : 12.708ms 83 次v8.compile : 1.982ms 25 次v8.run : 4.499ms 25 次EarlyOut_NotVisible:0.022ms 25 次RenderWidgetHost::ForwardMouseEvent : 4.671ms 640 次RenderWidgetHost::OnMsgInputEventAck : 1.102ms 61 次RenderWidgetHost::OnMsgUpdateRect : 0.894ms 40 次RenderWidgetHost::ForwardInputEvent : 1.527ms 61 次*总计:5044.941ms 2235 次选择开始时间:956.043ms选择范围:6082.888ms

从这个比较中,我觉得 Chrome 的 OnHandleInputEvent 实现在这里一直在吃光.怎么回事?

效果是可见的,只是在更小/更简单的项目上也没有那么明显.这是一个只有大约 700K 的示例,它比测试更易于管理30+ MB 的项目.如果您单击并拖动,您会看到滚动有点断断续续,但如果您松开鼠标按钮,它将继续滚动更加顺畅.

解决方案

我报告的错误 (https://code.google.com/p/chromium/issues/detail?id=103148) 已被评论为无法复制",如果我阅读正确,所以我'm 将假设这是 Chrome 中的一个错误并且已被其他更新修复(有意或无意).无论如何,我自己不再有这个问题了.

I'm testing Chrome 15.0.874.106m on a dual-core 2.8 GHz Pentium Windows 7 system with 4 GB RAM (and a highly accelerated video card with lots of memory) and I'm testing FireFox 7.0.1 on a single-core 1.6 GHz Athalon Windows Vista Laptop with 2 GB RAM. Yet the FireFox system is outperforming the Chrome system by about 10 times (10 times the FPS by my visual estimation).

Most of the posts I see are experiencing slower performance on FireFox and Chrome doing alright, but here I seem to have a severely reversed case. Any ideas on what could be responsible for this? The HTML file (single file, no dependencies) I'm testing is about 33 MB (16 MB compressed) and is available here.

This is a follow up to HTML5 canvas performance on small vs. large files.

I have discovered chrome://tracing which helped me acquire these profile results from running the problem file through the chrome profiler:

Edit: Results deleted, I got some new much more interesting results which I will describe in the new section (see below). End Edit

I also discovered the --show-fps-counter, which showed the scrolling running around 3.5 FPS. But I'm still not clear where the problem is.

I also found the --use-gl switch and tried desktop, egl and osmesa. The performance seemed to be best with osmesa, but only barely. I couldn't tell exactly how much because the show-fps-counter switch apparently doesn't work in conjunction with use-gl=osmesa. osmesa still doesn't perform nearly as well as FireFox on the other system.

Edit Continued: Thanks to a fluke in the event handling I somehow got into a mode where I could scroll the map without holding the mouse button down. To my shock and amazement, it was scrolling very smoothly! With a few additional edits (namely, removing the code that handles the mouseup event) I switched the code so that I never need to hold the button to scroll. Lo and behold, I can consistently scroll very smoothly so long as I am not holding down the mouse button. So I profiled/traced the behavior using chrome://tracing with and without holding the mouse button down. My results are below.

This is smooth scrolling without holding down the mouse button:

Selection summary:
 RenderWidget::OnHandleInputEvent                       :   1340.968ms     212 occurrences
 RenderWidget::InvalidationCallback                     :      7.867ms      27 occurrences
 RenderWidget::OnUpdateRectAck                          :      1.319ms     173 occurrences
 RenderWidget::OnSwapBuffersComplete                    :    129.018ms     173 occurrences
 V8EventListener::callListenerFunction                  :   1306.923ms     173 occurrences
 RenderWidget::DoDeferredUpdate                         :    120.033ms     204 occurrences
 EarlyOut_UpdateReplyPending                            :      0.004ms       4 occurrences
 EarlyOut_SwapStillPending                              :      0.181ms     165 occurrences
 CommandBufferHelper::WaitForToken                      :      8.358ms       3 occurrences
 WebViewImpl::layout                                    :       1.24ms     190 occurrences
 CCLayerTreeHost::updateLayers                          :     34.726ms     173 occurrences
 CCLayerTreeHost::commitTo                              :     24.426ms     173 occurrences
 CCLayerTreeHostImpl::drawLayers                        :     24.483ms     173 occurrences
 LayerRendererChromium::present                         :      8.434ms     173 occurrences
 EarlyOut_NoPendingUpdate                               :      0.018ms      17 occurrences
 CommandBufferProxy::FlushSync                          :      8.307ms       3 occurrences
 CCLayerTreeHost::updateLayers::calcDrawEtc             :     15.871ms     173 occurrences
 LayerRendererChromium::drawLayers                      :     23.441ms     173 occurrences
 RenderWidget::OnSwapBuffersPosted                      :      0.185ms     173 occurrences
 RendererGLContext::SwapBuffers                         :      4.431ms     173 occurrences
 LayerRendererChromium::drawLayersInternal::calcDrawEtc :     10.783ms     173 occurrences
 GpuCommandBufferStub::OnFlush                          :      7.581ms       3 occurrences
 GpuCommandBufferStub::OnAsyncFlush                     :   2825.339ms     352 occurrences
 GpuCommandBufferStub::OnEcho                           :       0.83ms     173 occurrences
 GpuScheduler:PutChanged                                :   2823.239ms     355 occurrences
 GLES2DecoderImpl::HandleTexImage2D                     :      5.779ms       6 occurrences
 GLES2DecoderImpl::HandleTexSubImage2D                  :      1.784ms       3 occurrences
 GLES2DecoderImpl::HandleSwapBuffers                    :   2387.561ms     173 occurrences
 GLContext::SwapBuffers                                 :   2384.623ms     173 occurrences
 ScheduledAction::execute                               :      2.453ms      16 occurrences
 v8.compile                                             :      1.037ms      14 occurrences
 v8.run                                                 :      3.142ms      14 occurrences
 EarlyOut_NotVisible                                    :      0.021ms      14 occurrences
 RenderWidgetHost::ForwardMouseEvent                    :      7.465ms     538 occurrences
 RenderWidgetHost::OnMsgInputEventAck                   :      5.218ms     212 occurrences
 RenderWidgetHost::OnMsgUpdateRect                      :      4.172ms     173 occurrences
 RenderWidgetHost::ForwardInputEvent                    :      4.551ms     212 occurrences
*Totals                                                 :  13535.811ms    5332 occurrences

Selection start                                         :    986.276ms
Selection extent                                        :   3320.488ms

And this is the choppy/slow scrolling when holding down the mouse button:

Selection summary:
 RenderWidget::OnHandleInputEvent                       :   3852.921ms      61 occurrences
 RenderWidget::InvalidationCallback                     :      4.549ms      61 occurrences
 RenderWidget::OnUpdateRectAck                          :      1.235ms      40 occurrences
 RenderWidget::OnSwapBuffersComplete                    :     20.684ms      40 occurrences
 V8EventListener::callListenerFunction                  :    357.075ms      39 occurrences
 RenderWidget::DoDeferredUpdate                         :     25.208ms     132 occurrences
 EarlyOut_SwapStillPending                              :      0.004ms       6 occurrences
 EarlyOut_UpdateReplyPending                            :      0.032ms      32 occurrences
 CommandBufferHelper::WaitForToken                      :       8.09ms       3 occurrences
 WebViewImpl::layout                                    :      0.346ms      78 occurrences
 CCLayerTreeHost::updateLayers                          :      7.805ms      40 occurrences
 CCLayerTreeHost::commitTo                              :      4.727ms      40 occurrences
 CCLayerTreeHostImpl::drawLayers                        :      9.449ms      40 occurrences
 LayerRendererChromium::present                         :      1.122ms      40 occurrences
 EarlyOut_NoPendingUpdate                               :      0.038ms      38 occurrences
 CommandBufferProxy::FlushSync                          :       8.05ms       3 occurrences
 CCLayerTreeHost::updateLayers::calcDrawEtc             :      3.694ms      40 occurrences
 LayerRendererChromium::drawLayers                      :      9.177ms      40 occurrences
 RenderWidget::OnSwapBuffersPosted                      :      0.035ms      40 occurrences
 RendererGLContext::SwapBuffers                         :      0.684ms      40 occurrences
 LayerTextureUpdaterCanvas::paint                       :      0.483ms       1 occurrences
 LayerTextureSubImage::uploadWithMapTexSubImage         :       0.02ms       1 occurrences
 LayerRendererChromium::drawLayersInternal::calcDrawEtc :      2.329ms      40 occurrences
 GpuCommandBufferStub::OnFlush                          :      7.326ms       3 occurrences
 GpuCommandBufferStub::OnAsyncFlush                     :     226.88ms     121 occurrences
 GpuCommandBufferStub::OnEcho                           :      0.377ms      40 occurrences
 GpuScheduler:PutChanged                                :      230.2ms     124 occurrences
 GLES2DecoderImpl::HandleTexImage2D                     :      5.705ms       8 occurrences
 GLES2DecoderImpl::HandleTexSubImage2D                  :      2.057ms       4 occurrences
 GLES2DecoderImpl::HandleSwapBuffers                    :    113.857ms      40 occurrences
 GLContext::SwapBuffers                                 :    113.377ms      40 occurrences
 ScheduledAction::execute                               :     12.708ms      83 occurrences
 v8.compile                                             :      1.982ms      25 occurrences
 v8.run                                                 :      4.499ms      25 occurrences
 EarlyOut_NotVisible                                    :      0.022ms      25 occurrences
 RenderWidgetHost::ForwardMouseEvent                    :      4.671ms     640 occurrences
 RenderWidgetHost::OnMsgInputEventAck                   :      1.102ms      61 occurrences
 RenderWidgetHost::OnMsgUpdateRect                      :      0.894ms      40 occurrences
 RenderWidgetHost::ForwardInputEvent                    :      1.527ms      61 occurrences
*Totals                                                 :   5044.941ms    2235 occurrences

Selection start                                         :    956.043ms
Selection extent                                        :   6082.888ms

From this comparison, it looks to me like Chrome's OnHandleInputEvent implementation is eating up all the time here. What's going on?

The effect is visible, just not as pronounced even on much smaller/simpler projects. Here's an example that's only about 700K which is a much more manageable thing to test with than the 30+ MB project. If you click and drag you can see is scrolls slightly choppily, but if you release the mouse button it will continue scrolling much more smoothly.

解决方案

The bug I reported (https://code.google.com/p/chromium/issues/detail?id=103148) has since been remarked on as "unable to reproduce" if I read correctly, so I'm going to run on the assumption that this was a bug in Chrome and has been fixed (intentionally or not) by other updates. In any case, I don't have the issue any more myself.

这篇关于HTML5 Canvas 在 Chrome 上很慢,但在 FireFox 上很快的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:HTML5 Canvas 在 Chrome 上很慢,但在 FireFox 上很快

基础教程推荐