如何提高搜索脚本的性能？

Question

我有很多项目和一些输入的UL清单。 我的脚本监听输入的键，并显示或隐藏与输入字符串匹配的字段。

这是我的代码：

$(function(){
    $('#srvSearchField').keyup(function(){
        var value = $(this).val();

        $('.srvClientBlock').each(function(){
            var currentFieldValue = $(this).children('.srvClientName').html();
            var exp = new RegExp(value);

            if (currentFieldValue.match(exp)) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    });
});

如何改善效能？ 或者我应该在服务器上发送请求以找到匹配的值？

UPD：我决定使用Ajax来过滤客户端。

var url = "<?php echo $searchClientUrl;?>";

$(function(){
    $('#srvSearchField').keyup(function(){
        var request = $(this).val();

        var callback = function(response) {
            $('.srvClientBlock').hide();

            var data = JSON.parse(response);
            for (var i = 0; i < data.length; i++) {
                $('#srvClient-' + data[i]).show();
            }
        };

        $.post(url, {"request" : request}, callback);
    });
});

谢谢大家的回答。

Answer 1

一些要点：

• 不要为每个搜索到的列表项重新创建正则表达式。
• 使用正则表达式的test方法代替match 。
• 将搜索到的文本（srvClientName）缓存在某个地方，因此您不必如此频繁地查询DOM。
• 您甚至可以将其缓存在DOM之外，因此仅在需要切换显示时才需要访问它（请参阅此答案以获取示例 ）。
• 如果DOM更新仍然花费太长时间，请考虑a）在操作期间隐藏完整的UL b）仅在其计数低于一定数量时才显示任何结果

当然，仅当列表内容没有动态更改（或至少每次都需要重新构建缓存）时，才应用缓存。

在某些情况下，将每次搜索的请求发送到服务器才有意义：

• 有限的（移动）客户端资源使得无法存储和/或处理大量数据
• 带宽有限，禁止下载整个数据
• 服务器上的实时数据（无法连续发送到客户端）

但是它们需要足够的带宽来处理许多请求，并且延迟相对较小。 不过，您可以通过特殊的优化来解决这些问题。

// simple improvements, no caching:
$(function(){
    $('#srvSearchField').keyup(function(){
        var exp = new RegExp( $(this).val() );
        $('.srvClientBlock').each(function(){
            var $this = $(this);
            var currentFieldValue = $this.children('.srvClientName').text();
            $this[ exp.test(currentFieldValue) ? "show" : "hide" ]();
        });
    });
});

Answer 2

如果可以避免ajax请求，请这样做。 您可能需要使用它们，但是如果遇到客户端问题，浏览器只能处理那么多数据。

如果您需要处理ajax请求或大量数据，请将keydown事件设置为开始100-300 ms的超时，此超时将在每次后续的keydown中重置并重新启动，从而调用搜索功能。 这样，您的搜索将仅在用户空闲200毫秒（不多，但足以大大减少搜索次数）时运行。