Question

当用户浏览Google地图时，会更新当前可见标记的列表。此列表最多包含1000个项目，当一次显示或隐藏数百个li时，它会减慢速度。它不到半秒钟，但它变得很烦人。

数组（newLiList）包含现在应该可见的项目。另一个数组（currentLiList）具有先前可见的项目。两个数组都包含li的id作为索引。

for (var i in newLiList) {
    if (currentLiList[i] != true) {
        $("ul#theList li#"+i).show();
    }
}
for (var i in currentLiList) {
    if (newLiList[i] != true) {
        $("ul#theList li#"+i).hide();
    }
}

有更快的方法吗？

Answer 1

您可以直接将<li>元素存储在数组中，这样您就不必进行数百次CSS选择器查找。然后，您只需执行$("ul#theList li#"+i)而不是liArray[i]。

仅供参考，"ul#theList li#<i>"仅相当于"#<i>"，因为元素ID（应该是）唯一的。您不需要额外的上下文。

Answer 2

对于每个.show（）和.hide（）函数调用，都会导致浏览器重绘。

在更改列表项之前将整个列表设置为none将阻止浏览器每次都重新计算文档流，然后您可以将列表设置回阻止。

或者，如果您不希望列表的闪烁消失，您可以克隆列表，隐藏应该隐藏的所有项目，然后用新的列表替换旧列表。

Answer 3

您应该尝试缓存选择器并使用上下文：

var targetList = $("ul#theList");

并替换：

$("ul#theList li#"+i).show();

与

$("#"+i, targetList).show();

这将减少jquery在整个DOM周围反弹的次数。

Answer 4

您可以在重置所有列表项时尝试隐藏列表。它可能会阻止一些重绘。

另外，请考虑使用

$("ul#theList li#"+i).attr("display","none");

$("ul#theList li#"+i).attr("display","block");

而不是hide（）和show（），因为它们可以为花式动画采用速度参数。如果你不使用它我不知道它们是否慢，但是值得检查。

Answer 5

很可能这很慢，因为你要求jQuery遍历DOM数百次。如果您改为使用逗号分隔所有ID的字符串，则可以在一个操作中选择并隐藏/显示它们。

让我澄清一下我的意思，因为如果你只是做$（string_of_elements），jQuery会导致遍历每个元素的整个DOM。

$("ul#theList").find(string_of_elements).show()

使用这种语法，jQuery将首先找到ul元素，然后只需遍历它就能找到li元素。现在，如果您将两个列表都转换为字符串，那么您可以做一些非常简洁的事情：

$("ul#theList")
    .find(string_of_elements_to_show).show().end()
    .find(string_of_elements_to_hide).hide();

使用此语法并链接这两个事件具有另一个优势。实际的显示和隐藏将同时发生，而不是一个接一个地隐藏和显示。

Answer 6

您是否描述过您的代码？

永远不要假设代码的哪一部分运行缓慢，在FireBug中配置代码（假设您使用的是Firefox）并调整运行速度较慢的代码。

Javascript - 显示和隐藏大量列表项的最快方式

6 个答案: