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之外，因此您只需在需要切换显示时访问它（请参阅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" ]();
        });
    });
});

Answer 2

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

如果您需要处理ajax请求或大量数据，请设置keydown事件以启动100-300毫秒的超时，该超时会在每个后续的keydown上重置并重新启动，后者又会调用您的搜索功能。这样，只有当用户空闲200毫秒时才会运行搜索（不多，但足以减少很多搜索呼叫次数）。

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

2 个答案: