在谷歌浏览器中，Jquery hide（）和show（）运行速度太慢

我有一个在Chrome中无法正常运行的Web应用程序。 在Firefox中完美运行。 我有一个包含大量列表项的页面，确切地说是316。 每个列表项都包含大量HTML。 我的问题是当我想隐藏或显示这些列表项时。

我在jsFiddle上有一个测试页面来显示我遇到的问题。 我将HTML页面剥离到一个无序列表以保存所有316个列表项。 我有两个按钮，只需在点击时调用jQuery hide或show。 同样，这在Firefox，Opera，甚至IE中运行得很快，在Safari中非常好，但在谷歌Chrome中它可能需要30秒以上，这会打开对话框窗口，询问您是否要杀死页面，因为脚本运行时间很长。

这是jsFiddle的链接

http://jsfiddle.net/oumichaelm/UZCZc/3/embedded/result/

感谢任何输入。 JMM

Answer 1

看起来这与jQuery无关，只是Chrome隐藏了具有大量子元素的父元素的问题。

这只是使用基本的javascript来隐藏文档准备好的元素：

document.getElementById('sortable-lines').style.display="none"; 

文档准备好后，它仍然需要永远。

http://jsfiddle.net/petersendidit/UZCZc/10/embedded/result/

为此打开了Chrome错误： http ： //code.google.com/p/chromium/issues/detail？id = 71305

Answer 2

隐藏时，从DOM中删除元素比使用hide()更快。

 var sortableLines = $('#sortable-lines'); $('#hide').click(function() { $('#timer').text("Hiding"); sortableLines.remove(); }); 

append()回DOM时，它仍然很慢。

一种可能的解决方法是在单击show按钮时显示前10个左右的项目，然后设置setInterval以逐步显示它们。

---

编辑：发现另一个黑客：

您必须将容器设置为overflow: hidden ：

 #linecontainer { overflow: hidden; } 

隐藏时，通过将margin-top设置为较大的负数，将该元素移动到远端。

 $('#hide').click(function() { $('#timer').text("Hiding"); sortableLines.css('margin-top', '-1000000px'); }); 

显示时，重置其margin-top 。

 $('#show').click(function() { $('#timer').text("Showing"); sortableLines.css('margin-top', '0'); }); 

它立即显示和隐藏 。

Answer 3

感谢上面的答案，它运作良好，加快了过程。

然而它并不总是有效 – 当我需要的元素位于列表的顶部时工作得很好。 但是，如果我从列表中间选择一些东西，它就不会显示所有内容。

我相信我知道它为什么行为不端。

当一长串元素的值被设置为隐藏/显示时，隐藏的元素将从流中移除并按照它们被删除的顺序放置在页面的底部。
这样可以非常快速地删除元素。

但是，试图让它们再次可见是渲染的痛苦，因为chrome必须记住这些项目所属的顺序，并且似乎要重新计算相关的值。

除了大多数其他浏览器之外，组件的位置不会丢失，因此在这种不必要的排序中不会浪费时间。 上面的答案效果非常好，因为这可以避免Chrome的无序问题。