HTML5 Canvas在Chrome上运行缓慢，但在FireFox上运行得很快(HTML5 Canvas slow on Chrome, but fast on 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：//跟踪和跟踪行为，并且不用按住鼠标按钮。 我的结果如下。
这是顺利滚动，而不需要按住鼠标按钮：
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这是按住鼠标按钮时的波动/慢速滚动：
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从这个比较来看，我认为Chrome的OnHandleInputEvent实现在这里一直在吃东西。 这是怎么回事？
效果是可见的，即使在更小/更简单的项目上也不明显。 下面是一个只有700K的例子，与30+ MB的项目相比，这是一个更容易管理的测试项目。 如果你点击并拖动，你可以看到滚动略显碎片，但如果你释放鼠标按钮，它将继续滚动更顺畅。
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.488msAnd 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.888msFrom 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.
原文：https://stackoverflow.com/questions/7965592
最满意答案
问题是.attr（）是一个jQuery方法。 确保在项目中包含此库，并在调用函数之前尝试将元素包装在jQuery对象中。
var tempId = $(settings.aoColumns[column]).attr('name');The problem is that .attr() is a jQuery method. Make sure you include this library in your project and try wrapping your element in a jQuery object before calling the function.
var tempId = $(settings.aoColumns[column]).attr('name');
相关问答
更多-
问题是.attr（）是一个jQuery方法。 确保在项目中包含此库，并在调用函数之前尝试将元素包装在jQuery对象中。 var tempId = $(settings.aoColumns[column]).attr('name'); The problem is that .attr() is a jQuery method. Make sure you include this library in your project and try wrapping your element in a jQu ...
-
只需将数据表选项中的顺序添加到空数组，就像这样 order: [] 因为默认情况下它会应用第0列的顺序，因此即使我们使其不可排序，它也会显示排序图标。 通过设置此属性，您将覆盖此行为 $('#tblUsers').DataTable({ "order" : [], // this new option "searching": true, "ordering": true, "pagingType": "fu ...
-
我已经想出如何解决我的问题，并认为我会分享它以防其他人有类似的问题。 我添加了razor代码来生成javascript，动态地将clasName属性添加到columndef。 var table = $('#dt_basic').dataTable({ "pagingType": "full_numbers", "ajax": "@Url.Action("LoadResultGrid", "Verifications", new { id = Model.RunId ...
-
如何使用键和值作为列从json对象填充数据表(How to populate the datatable from json object with key and value as columns)[2023-05-06]
这似乎适用于您的示例数据： var data = { "first-name": "Tom", "last-name": "Hanks", "Designation": "Developer" }; var table = $('#example').DataTable({ "columns": [ { "data": "key", "title": "Key" }, { ... -
如何调整jQuery数据表的列过滤器插件控件(How to Resize column filter plugin controls for jquery datatable)[2022-04-03]
这适用于我： $('#my-table th').bind('mouseup', function(event){ var index = $(this).parent().children().index($(this)); var colWidth = $(this).css('width'); var input = $('#my-table tfoot tr input:eq(' + index +')'); input.css("width", colWidth); }); 在构 ... -
通过将列数据封装在div中并为div设置空白宽度css属性，找到了解决方案。 小提琴手： https ： //jsfiddle.net/Vimalan/2koex0bt/6/ JS $('#example').DataTable( { data: dataList, deferRender: true, scrollX: true, scrollY: 200, scrollC ...
-
问题的原因是隐藏了第二个网格的初始化，结果当它变得可见时，控件的对齐受到干扰。 这个东西也在JQuery Datatables官方网站上提到过。 您可以从这里阅读所有细节。 为避免这种情况，只要网格显示/绘制，您就需要调用AdjustColumns函数。 我已经两次调用此函数： 当数据表初始化时 当绘制函数调用网格时 （起初我只在初始化时调用了这个函数，但是当我尝试使用智能搜索过滤记录时，对齐再次受到干扰。） 以下是我对我的数据表初始化代码所做的更改，现在工作正常。 /*DataTable Implemen ...
-
是否可以通过数据属性过滤jQuery DataTable？(Is it possible to filter a jQuery DataTable by data attribute?)[2023-12-12]
如果要按代码触发过滤器，请创建自定义过滤器： $.fn.dataTable.ext.search.push( function(settings, data, dataIndex) { var dataLabel = table .row(dataIndex) //get the row to evaluate .nodes() //extract the HTML - node() does not s ... -
我正在使用ver 1.10+预期的术语。 我想你们中的一些人有点老了。 不确定我完全理解你要做什么，但听起来你正在根据返回的数据显示列。 尝试这个：