为什么Chrome会在隐藏大型Knockout元素时使用更多CPU？

Question

我有一个单页的Web应用程序,它使用Knockout.js 2.2.1来显示来自服务器的信息流(使用socket.io,虽然我认为不重要).这个应用程序还包含一个大型数据表,它是使用Knockout的foreach绑定从JSON对象创建的.(表很大,但不是很大:20列和200行左右.)

由于表很大,用户可以通过单击按钮来打开/关闭它.数据<table>放在一个<div>元素中,我可以使用jQuery .hide()和.show()方法隐藏/显示(基本上可以通过设置和清除CSS display: none来实现<div>).

所有这些功能都有效.但是,我注意到在"关闭"(隐藏)大数据表之后,如果Knockout生成的表足够大,Chrome的CPU使用率会跳跃 - 一直到100%.更有趣的是,这只发生在用户在<div>显示包含表格的元素内部的某个地方点击之后.当表被隐藏(并且CPU使用率很高)时,单击页面上的其他位置将使CPU使用率恢复正常.该过程将随意重复.

另一个可能有用的注意事项:如果我从服务器停止流数据,则不会发生此问题(或者,CPU使用率不明显).此页面上有一个Knockout视图模型,它管理来自服务器的流数据和从JSON对象创建此数据表.这两组数据完全是分开的 - 表中不会显示任何更改的数据,并且表中不包含返回视图模型的事件绑定.就好像Knockout模型的流数据更新正在导致数据表上的工作,即使没有流数据绑定到表. 而它这样做仅在表不显示!

快速摘要:

• Web应用程序使用Knockout在加载页面时呈现大型数据表.
• 此表.hide()在启动时隐藏$(document).ready,但.show()在单击按钮后显示,可以再次隐藏
• 如果在数据表中单击鼠标,则在再次隐藏表后,Chrome中的CPU使用率将跳至100%.
• 单击页面上的任何其他内容将使CPU使用率恢复正常.

其他相关信息:

• Chrome JavaScript分析器显示了高CPU使用率,但它被简单归类为(程序)时间.
• Windows上的IE10和Firefox 20都没有显示此问题.

任何想法在这里发生了什么,或建议进行其他故障排除？

的jsfiddle:

示例:http://jsfiddle.net/CTYMv/6/

在加载小提琴后查看CPU使用率,它应该是低的.单击"显示表",然后单击弹出的div内的某处(灰色背景).然后单击"隐藏表" - CPU使用率将显着增加.然后单击其他任何位置(白色背景),CPU将恢复正常.

Answer 1

我想我们现在可以认为这是 webkit 引擎中的一个错误。此错误仅在使用 css property 时出现display:none;。是因为 GPU 使用 webkit 渲染隐藏元素的方式吗？嗯，我还是不知道...

查看演示

这是我能想到的最简单的解决方法，这不应该干扰您的任何其他代码：{例如可观察到的淘汰赛}

CSS：{按照布兰登的建议添加了指针事件}

.hidden{opacity:0;pointer-events:none} //don't use display:none here

JS：

//don't use hide/show jq methods as internally it set display none (fadeOut() methods too)
$('#btn_show').click(function(){
    $('#bigdatadiv').removeClass('hidden');
});
$('#btn_hide').on('click',function(){    
   $('#bigdatadiv').addClass('hidden')
});

我知道这只是一种解决方法，但仍然没有回答您的问题：为什么会发生这种情况？