Chrome上的HTML5 Canvas速度较慢，但在FireFox上速度较快 [英] HTML5 Canvas slow on Chrome, but fast on FireFox
问题描述
我还找到了--use-gl开关，并尝试了桌面，egl和osmesa。表演似乎是最好的与osmesa，但只是勉强。我无法确切知道这是多少，因为show-fps-counter开关显然不能和use-gl = osmesa结合使用。在另一个系统上，osmesa的表现仍然不如FireFox。
编辑继续：以某种方式进入了一个模式，我可以滚动地图，而不必按住鼠标按钮。令我震惊和惊讶的是，它滚动得非常顺利！通过一些额外的编辑（即删除处理mouseup事件的代码），我切换了代码，以便我永远不需要按住滚动按钮。瞧，只要我没有按住鼠标按钮，我就可以一贯滚动 。所以我使用chrome：//跟踪和跟踪行为，并且不用按住鼠标按钮。我的结果如下。
这是平滑的滚动，不用按住鼠标按钮：
选择摘要：
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 ::现在：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 :: S wapBuffers：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
这是c当按住鼠标按钮时，跳跃/慢速滚动：
选择总结：
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出现次数
CCLayerTreeHost :: updateLayers：7.805ms 40次出现
CCLayerTreeHost :: commitTo：4.727ms 40次出现
CCLayerTreeHostImpl :: drawLayers：9.449ms出现次数
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.684 ms 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.022 ms发生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 ）如果我正确地阅读，那么它就被认为是无法重现的，所以我将假设这是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.
这篇关于Chrome上的HTML5 Canvas速度较慢，但在FireFox上速度较快的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
