Blu*_*kMN 5 javascript performance firefox google-chrome html5-canvas
我正在具有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 :: 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）已被标记为“无法重现”，所以我要运行假设这是 Chrome 中的一个错误，并且已被其他更新修复（有意或无意）。无论如何，我自己已经不再有这个问题了。