35

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

由于表格很大，用户可以通过点击按钮来打开/关闭它。数据<table>被放置在一个<div>元素中，我可以使用 jQuery.hide()和.show()方法（基本上通过设置和清除 CSSdisplay: none上的CSS 来工作<div>）隐藏/显示该元素。

所有这些功能都有效。但是，我注意到在“关闭”（隐藏）大数据表之后，Chrome 的 CPU 使用率会跳跃 - 如果 Knockout 生成的表足够大，则一直到 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将恢复正常。

4

3 回答 3

3

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

看演示

这是我能想到的最简单的解决方法，这不应该干扰您的任何其他代码：{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')
});

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

于 2013-05-17T15:09:55.673 回答
0

谢谢你的这个帖子；你会认为这个错误会在 2 年后得到修复。

window.getSelection().removeAllRanges() 为我解决了问题，并且最适合我的代码。

于 2015-09-23T15:15:14.597 回答
-2

只是在大块window.getSelection().removeAllRanges() 之前使用。.hide();为我工作得很好。这很愚蠢，但这是真的。

于 2015-10-26T14:45:26.953 回答