Jquery hide() 和 show() 在 google chrome 中运行太慢

Question

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

我在 jsFiddle 上有一个测试页面来显示我遇到的问题。我将 HTML 页面精简为一个无序列表来保存所有 316 个列表项。我有两个按钮，单击时只需调用 jQuery 隐藏或显示。同样，它在 Firefox、Opera 甚至 IE 中运行得很快，在 Safari 中也运行得很好，但在 Google Chrome 中可能需要 30 秒以上，这会弹出对话框窗口，询问您是否要终止页面，因为脚本运行时间太长。

的链接

这是 jsFiddle http://jsfiddle.net/oumichaelm/UZCZc/3/ 嵌入/结果/

感谢您的任何意见。 杰姆

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 时，它仍然很慢。

一种可能的解决方法是在单击显示按钮时显示前 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 的无序问题。