Jquery hide() 和 show() 在谷歌浏览器中运行太慢

Posted 2023-05-08

【中文标题】Jquery hide() 和 show() 在谷歌浏览器中运行太慢

【英文标题】：Jquery hide() and show() runs too slow in google chrome

【发布时间】：2011-06-17 23:22:32

【问题描述】：

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

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

这里是 jsFiddle 的链接

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

感谢您的任何意见。 嗯

【问题讨论】：

这很不寻常。 Chrome 在动态操作中速度较慢。您是否尝试过对其进行分析，看看它在哪些操作上很慢？

确实很奇怪，如果您使用 Web Inspector 通过 CSS 隐藏它也需要很长时间，所以问题不在于 javascript。可见性：隐藏速度很快，但我猜这并不能解决您的问题。

【参考方案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

【讨论】：

你能在 Chrome 中提交一个关于这个的错误吗？ crbug.com/new 并让我知道您归档的#。我会用合适的团队提出来。性能应该更好。发生这种情况是不可接受的，它打破了 Chrome 中的三个“速度”之一

您的 javascript 肯定证明它不是 jquery 问题。感谢您抽出宝贵时间查看此内容。

【参考方案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');
);

还有it shows and hides instantly。

【讨论】：

泰语 - 感谢您的努力。我最大的问题是为什么 chrome 的速度差异。但我肯定会探索设置 margin-top 属性。

感谢margin-top hack，效果很好。在 chrome 中遇到了同样的问题

补充一点，我有第二种情况，margin-top 不起作用，由于我的一些样式要求，它正在向上移动整个元素列表。但是，position:absolute 和 top:-10000px 是第二个选项

该列表的容器必须有overflow: hidden，这样容器下面的所有其他元素都不会上升（在这种情况下，容器的行为就像 height: 0）。

这些确实应该是两个独立的答案，因此每个答案都可以根据自己的优点进行投票。 （如果它们都是很好的答案，那么答案作者也意味着更多的代表。）

【参考方案3】：

感谢上面的回答，它工作得很好并且加快了进程。

但它并不总是有效 - 当我需要的元素位于列表顶部时效果很好。但是，如果我从列表中间挑选一些东西，它不会全部显示出来。

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

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

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

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