隐藏数千个< li>的最快方法元素？ [英] Fastest way to hide thousands of <li> elements?
问题描述
我有一个自动填充表单，用户可以在其中键入一个字词，并隐藏所有不包含该字词的< li> 元素。
I have an autocomplete form where the user can type in a term and it hides all <li> elements that do not contain that term.
我最初使用jQuery的每个遍历所有< li> 并应用 .hide（）到那些不包含该术语的那些。这太慢了。
I originally looped through all <li> with jQuery's each and applied .hide() to the ones that did not contain the term. This was WAY too slow.
我发现更快的方法是遍历所有< li> 并且将类 .hidden 应用于需要隐藏的所有内容，然后在循环结束时执行 $（'。hidden'）。hide（ ）。但这有点像hackish。
I found that a faster way is to loop through all <li> and apply class .hidden to all that need to be hidden, and then at the end of the loop do $('.hidden').hide(). This feels kind of hackish though.
可能更快的方法是重写 .hidden 的CSS规则使用 document.styleSheets 的类。任何人都可以想到更好的方式吗？
A potentially faster way might be to rewrite the CSS rule for the .hidden class using document.styleSheets. Can anyone think of an even better way?
编辑：让我澄清一些我不确定太多人知道的事情。如果在循环的每次迭代中更改DOM，并且该更改导致重新绘制页面，那么这将比准备所有更改并在循环完成时立即应用它们慢得多。
Let me clarify something that I'm not sure too many people know about. If you alter the DOM in each iteration of a loop, and that alteration causes the page to be redrawn, that is going to be MUCH slower than "preparing" all your alterations and applying them all at once when the loop is finished.
推荐答案
每当你处理成千上万的项目时，DOM操作将变慢。循环遍历许多DOM元素并基于该元素的特性操纵每个元素通常不是一个好主意，因为这涉及在每次迭代中对DOM方法的大量调用。正如您所见，它确实很慢。
Whenever you're dealing with thousands of items, DOM manipulation will be slow. It's usually not a good idea to loop through many DOM elements and manipulate each element based on that element's characteristics, since that involves numerous calls to DOM methods in each iteration. As you've seen, it's really slow.
更好的方法是将数据与DOM分开。搜索JS字符串数组要快几个数量级。
A much better approach is to keep your data separate from the DOM. Searching through an array of JS strings is several orders of magnitude faster.
这可能意味着将数据集作为JSON对象加载。如果这不是一个选项，你可以循环遍历< li> s一次（在页面加载时），并将数据复制到一个数组中。
This might mean loading your dataset as a JSON object. If that's not an option, you could loop through the <li>s once (on page load), and copy the data into an array.
既然您的数据集不依赖于存在的DOM元素，您只需使用< ul> 替换整个内容每次用户输入时， .html（）。 （这比JS DOM操作要快得多，因为当您只需更改 innerHTML 时，浏览器可以优化DOM更改。）
Now that your dataset isn't dependent on DOM elements being present, you can simply replace the entire contents of the <ul> using .html() each time the user types. (This is much faster than JS DOM manipulation because the browser can optimize the DOM changes when you simply change the innerHTML.)
var dataset = ['term 1', 'term 2', 'something else', ... ];
$('input').keyup(function() {
var i, o = '', q = $(this).val();
for (i = 0; i < dataset.length; i++) {
if (dataset[i].indexOf(q) >= 0) o+='<li>' + dataset[i] + '</li>';
}
$('ul').html(o);
});
As you can see, this is extremely fast.
但是，请注意，如果你将其增加到10,000个项目，性能开始受到前几次击键的影响。这与插入到DOM中的结果数量相关，而不是与搜索的原始数量相关。 （当你输入更多，并且显示的结果更少时，性能很好–即使它仍在搜索所有10,000个项目。）
Note, however, that if you up it to 10,000 items, performance begins to suffer on the first few keystrokes. This is more related to the number of results being inserted into the DOM than the raw number of items being searched. (As you type more, and there are fewer results to display, performance is fine – even though it's still searching through all 10,000 items.)
为了避免这种情况，我考虑将显示的结果数量限制在合理的数量。 （1000似乎和任何一样好。）这是自动完成的;没有人真正看过所有的结果–他们将继续输入，直到结果集对于人类是可管理的。
To avoid this, I'd consider capping the number of results displayed to a reasonable number. (1,000 seems as good as any.) This is autocomplete; no one is really looking through all the results – they'll continue typing until the resultset is manageable for a human.
这篇关于隐藏数千个< li>的最快方法元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
