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

当用户平移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

您可以将

元素直接存储在数组中，这样就不必进行数百次CSS选择器查找。 然后代替$("ul#theList li#"+i)你只需要做liArray[i] 。

仅供参考， "ul#theList li#"仅相当于"#"因为元素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

你有没有描述过你的代码？

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

Answer 6

很可能这很慢，因为你要求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(); 

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