title: HTML5 Canvas slow on Chrome, but fast on FireFox
body: <p>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).</p>
  
  <p>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 <a href="http://sgdk2.enigmadream.com/ben/LokRevivalHtml5.7z" rel="nofollow noreferrer">here</a>.</p>
  
  <p>This is a follow up to <a href="https://stackoverflow.com/questions/7945924/html5-canvas-performance-on-small-vs-large-files/7946248#comment9720904_7946248">HTML5 canvas performance on small vs. large files</a>.</p>
  
  <p>I have discovered chrome://tracing which helped me acquire these profile results from running the problem file through the chrome profiler:</p>
  
  <p><strong>Edit:</strong> <em>Results deleted, I got some new much more interesting results which I will describe in the new section (see below).</em> <strong>End Edit</strong></p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p><strong>Edit Continued:</strong> 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 <em>consistently</em> scroll <em>very</em> 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.</p>
  
  <p>This is smooth scrolling without holding down the mouse button:</p>
  
  <pre>
  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
  </pre>
  
  <p>And this is the choppy/slow scrolling when holding down the mouse button:</p>
  
  <pre>
  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
  </pre>
  
  <p>From this comparison, it looks to me like Chrome's OnHandleInputEvent implementation is eating up all the time here.  What's going on?</p>
  
  <p>The effect is visible, just not as pronounced even on much smaller/simpler projects.  <a href="http://sgdk2.enigmadream.com/ben/CleanGame.html" rel="nofollow noreferrer">Here's</a> 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.</p>