谷歌浏览器中的jquery hide（）和show（）运行太慢

我有一个web应用程序在chrome中无法正常运行。在Firefox中完美工作。我有一个包含大量列表项的页面，准确地说是316。每个列表项都包含大量的HTML。我的问题是当我想隐藏或显示这些列表项。谷歌浏览器中的jquery hide（）和show（）运行太慢

我有一个关于jsFiddle的测试页来显示我遇到的问题。我将HTML页面分解为一个无序列表以保存所有316个列表项。我有两个按钮，简单地调用jQuery隐藏或显示时单击。同样，在Firefox，Opera甚至IE中运行速度都很快，但在Safari中运行得非常好，但在谷歌浏览器中它可能需要超过30秒的时间，这会弹出一个对话窗口，询问您是否要因脚本运行时间过长而终止页面。

这里是链接到的jsfiddle

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

感谢任何输入。 jmm

来源

2011-01-30 jmm

那是不寻常的。 Chrome的动态操作速度较慢。你有没有尝试分析它，看看它是缓慢的操作？ – Orbling 2011-01-30 03:08:50

奇怪的是，如果您使用Web Inspector通过CSS隐藏它也需要很长时间，所以问题不在于Javascript。可见性：隐藏速度很快，但我猜这并不能解决您的问题。 – Duopixel 2011-01-30 03:37:20

看起来这与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

来源

2011-01-30 03:40:12 PetersenDidIt

你能否请在Chrome中提交一个错误？ http://crbug.com/new让我知道你提交的文件。我会用合适的团队提出来。性能应该更好。它不可接受的发生，它打破了Chrome浏览器中的三个之一，这是“速度” – 2011-01-30 04:11:35

隐藏的情况下，除去从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。

来源

2011-01-30 04:12:55 Thai

感谢上面的答案，它工作得很好，加快了过程。

但它并不总是工作 - 当我需要的元素位于列表的顶部时很好用。但是，如果我从列表中选择一些东西，它不会显示全部。

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

当元件的一个长列表的值被设置为隐藏/显示隐藏的元件从流中除去，并放置在页面中被移走的顺序的底部。
这使得删除元素非常快。

然而，试图让他们看到又是在呈现一种痛苦铬必须记住在这些项目属于中，看似重新计算相关值的顺序。

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

来源

2011-08-04 15:02:21 James

谷歌浏览器中的jquery hide（）和show（）运行太慢

回答

相关问题