Jquery hide（）和show（）在google chrome中运行太慢

我有一个web应用程序不能在chrome中正确运行。在Firefox中可以完美地工作。我有一个页面，上面有大量的列表项，确切地说是316项。每个列表项都包含大量HTML。我的问题是当我想隐藏或显示这些列表项时

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

这里是指向JSFIDLE的链接

谢谢你的意见。

---

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

这只是使用基本javascript隐藏文档就绪时的元素：

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

文件准备好后，仍然需要很长时间

---

为此打开了一个Chrome错误：

隐藏时，从DOM中删除元素比使用

hide（）

更快

当您

append（）

将其返回到DOM时，它仍然很慢

一种可能的解决方法是在单击“显示”按钮时显示前10个左右的项目，然后

setInterval

逐步显示它们

---

编辑：发现另一个黑客：

您必须将容器设置为

溢出：隐藏

：

#linecontainer { overflow: hidden; }

隐藏时，通过将

边距顶部

设置为一个大的负数，将该元素向上移动到远顶部

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

显示时，重置其

页边距顶部

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

---

而且。

感谢上面的答案，它非常有效，加快了过程

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

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

当长元素列表的值设置为隐藏/显示时，隐藏的元素将从流中删除，并按删除顺序放置在页面底部。
这使得删除元素的速度非常快

然而，试图使它们再次可见对渲染来说是一件痛苦的事情，因为chrome必须记住这些项目所属的顺序，并且似乎要重新计算相关的值

---

与大多数其他浏览器不同，组件的位置不会丢失，因此不会浪费时间进行不必要的排序。上述答案非常有效，因为这避免了Chrome的无序问题。

这是不寻常的。Chrome速度较慢，具有动态操作。你试过对它进行分析了吗，看看它在做什么操作时变慢了吗？的确很奇怪，如果你使用Web Inspector通过CSS隐藏它，也需要很长时间，所以问题不在于Javascript。可见性：隐藏很快，但我猜这并不能解决你的问题。你能在Chrome上提交一个关于这个的bug吗？让我知道你的档案。我会把它交给合适的团队。性能应该更好。这是不可接受的，它打破了Chrome中三个“速度”中的一个，你的javascript肯定证明了这不是jquery的问题。谢谢你花时间看这个。泰语-谢谢你做这个。我最大的问题是为什么chrome的速度差。但是我肯定会探索设置margin top属性。感谢

margin top

hack，它工作得非常好。在ChromeMething中遇到了同样的问题，我还有第二种情况，margin top不起作用，因为我的一些造型要求，它将整个元素列表向上移动。但是，

position:absolute

和

top:-10000px

作为第二个选项。该列表的容器必须具有

溢出：隐藏

，以便容器下面的所有其他元素不会上升（在本例中，容器的作用与高度：0类似）。这确实应该是两个独立的答案，因此，每个人都可以根据自己的优点投票。（如果它们都是好答案，也意味着答案作者的代表性更强。）

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