隐藏数千个

元素的最快方法？

我有一个自动完成表单，用户可以在其中输入一个术语，它会隐藏所有内容<li>不包含该术语的元素。

我最初循环了所有<li>与 jQuery 的each并应用了.hide()那些不包含该术语的。这太慢了。

我发现更快的方法是循环遍历所有<li>并申请班级.hidden所有需要隐藏的内容，然后在循环结束时执行$('.hidden').hide()。但这感觉有点hackish。

一种可能更快的方法可能是重写 CSS 规则.hidden类使用document.styleSheets。有人能想到更好的方法吗？

编辑：让我澄清一些我不确定太多人知道​​的事情。如果您在循环的每次迭代中更改 DOM，并且该更改会导致页面重新绘制，那么这将比“准备”所有更改并在循环完成时立即应用它们要慢得多。

每当您处理数千个项目时，DOM 操作will慢一点。循环遍历许多 DOM 元素并根据该元素的特征操作每个元素通常不是一个好主意，因为这涉及在每次迭代中对 DOM 方法的大量调用。正如您所看到的，它真的很慢。

更好的方法是保持你的data与 DOM 分开。搜索 JS 字符串数组的速度要快几个数量级。

这可能意味着将数据集作为 JSON 对象加载。如果这不是一个选项，您可以循环遍历<li>s 一次（在页面加载时），并将数据复制到数组中。

现在您的数据集不依赖于存在的 DOM 元素，您可以简单地替换 DOM 元素的全部内容<ul> using .html()每次用户键入时。 （这比 JS DOM 操作要快得多，因为当你只需更改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);
});

如你看到的 http://jsfiddle.net/josh3736/uaSMq/，这速度非常快。

但请注意，如果您最多 10,000 件商品 http://jsfiddle.net/josh3736/uaSMq/3/，在前几次击键时性能开始受到影响。这与插入到 DOM 中的结果数量比与搜索的原始项目数量更相关。 （当您输入的内容越多，要显示的结果越少，性能就很好 - 即使它仍在搜索所有 10,000 个项目。）

为了避免这种情况，我会考虑将显示的结果数量限制为合理的数量。 （1,000 似乎和任何一个都一样好。）这是自动完成；没有人真正查看所有结果 - 他们会继续输入，直到结果集可供人类管理。