gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 21:29:57 25 4
gpt4 key购买 nike

我有一个单页 Web 应用程序,它使用 Knockout.js 2.2.1 显示从服务器流式传输的信息(使用 socket.io,尽管我认为这并不重要)。该应用程序还包含一个大型数据表,该数据表是使用 Knockout 的 foreach 从 JSON 对象创建的。绑定(bind)。 (表格很大,但并不巨大:大约 20 列和 200 行。)

由于表格很大,用户可以通过单击按钮来打开/关闭它。数据<table>被放置在 <div> 内我可以使用 jQuery 隐藏/显示的元素 .hide().show()方法(本质上是通过在 display: none 上设置和清除 CSS <div> 来工作的)。

所有这些功能都有效。然而,我注意到,在“关闭”(隐藏)大数据表之后,Chrome 的 CPU 使用率会猛增 - 如果 Knockout 生成的表足够大,则一直到 100%。更有趣的是,这发生在用户单击 <div> 内的某处之后。显示表格时包含该表格的元素。当表格隐藏时(CPU 使用率很高),单击页面上的其他位置将使 CPU 使用率恢复正常。该过程将随意重复。

另一个可能有用的注意事项:如果我停止来自服务器的流数据,则不会发生此问题(或者,在 CPU 使用率中不明显)。此页面上有一个 Knockout View 模型,它管理来自服务器的流数据以及从 JSON 对象创建此数据表。否则,两组数据是完全独立的 - 表中不会显示任何更改的数据,并且表不包含返回 View 模型的事件绑定(bind)。就好像 Knockout 模型的流数据更新正在导致数据表上的工作,即使没有任何流数据绑定(bind)到表。 并且只有当表格显示时才会执行此操作!

快速摘要:

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

其他相关信息:

  • Chrome JavaScript 分析器显示 CPU 使用率较高,但它被简单地归类为(程序)时间。
  • Windows 上的 IE10 和 Firefox 20 均未出现此问题。

对这里发生的情况有什么想法,或者对其他故障排除有建议吗?

jsFiddle:

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

加载fiddle后查看CPU使用率,应该很低。单击“显示表格”,然后单击弹出的 div 内的某处(灰色背景)。然后点击“隐藏表”——CPU使用率会显着增加。然后点击其他地方(白色背景),CPU就会恢复正常。

最佳答案

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

SEE DEMO

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

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')
});

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

关于jquery - 为什么 Chrome 在隐藏大型 Knockout 元素时会使用更多 CPU?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16411661/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com