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

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();
            }
        });
    });
});

如何提高性能？或者我应该在我的服务器上发送请求以查找匹配的值？

更新:我决定使用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 外部，因此只需在需要切换显示时访问它(请参阅 this answer for an example )。
• 如果 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" ]();
        });
    });
});