由于表大，因此可以由用户通过点击按钮来打开/关闭。数据< table>放置在< div>元素，我可以隐藏/显示使用jQuery的.hide()和.show()方法(本质上工作通过设置和清除CSS显示：无在< div>)。
所有这些功能都有效。但是，我注意到，在“关闭”(隐藏)大数据表之后，Chrome的cpu使用率会跳转 – 一直到100％，如果Knockout生成的表足够大。更有趣的是，这只发生在用户点击了< div>显示时包含表的元素。当表被隐藏(并且cpu使用率很高)时，单击页面上的其他位置将使cpu使用率恢复正常。该过程将随意重复。
另一个可能有用的注意事项：如果我停止从服务器的流数据，这个问题不会发生(或者，它不是显着的cpu使用)。此页面上有一个Knockout视图模型，它管理来自服务器的流数据和从JSON对象创建此数据表。两组数据以其他方式完全分离 – 表中不显示任何更改的数据，并且该表不包含回到视图模型的事件绑定。就好像Knockout模型的流数据更新导致对数据表的工作，即使没有流数据被绑定到表。它只有当表不显示时才这样做！
快速总结：
> Web应用程序使用Knockout在加载页面时呈现大型数据表。
>这个表在$(document).ready启动时被.hide()隐藏，但是在点击按钮后使用.show()显示，并且可以再次隐藏
>如果鼠标在数据表内被点击，Chrome的cpu使用率将在表再次隐藏后跳转到100％。
>点击页面上的任何其他内容将使cpu使用率恢复正常。
其他相关信息：
> Chrome JavaScript分析器显示高cpu使用率，但它被简单地分类为(程序)时间。
> Windows上的IE10和Firefox 20都没有显示此问题。
任何想法，这里发生了什么，或建议额外的故障排除？
jsFiddle：
示例：http://jsfiddle.net/CTYMv/6/
看看cpu使用率加载后的小提琴，它应该是低的。点击“显示表格”，然后点击弹出的div内部(灰色背景)。然后单击“隐藏表” – cpu使用率将显着增加。然后单击任何地方(白色背景)，并且cpu将恢复正常。
解决方法
这是我能想到的最简单的解决方法，这不应该干扰任何您的其他代码：{eg knockout observable}
CSS：
{添加指针 – 事件由Brandon建议}
.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')
});
我知道这只是一个解决方法，仍然不能回答你的问题：为什么会发生？
