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

我有很多项目和一些输入的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);
    });
});

var url=”“；
$（函数（）{
$（'#srvSearchField'）.keyup（函数（）{
var请求=$（this.val（）；
var callback=函数（响应）{
$（'.srvClientBlock'）.hide（）；
var data=JSON.parse（响应）；
对于（变量i=0；i

---

谢谢大家的回答。

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

---

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

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

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

一些要点：

• 不要为每个搜索的列表项重新创建正则表达式
• 使用正则表达式的

  test

  方法，而不是

  match

• 将搜索到的文本（srvClientName）缓存到某个地方，这样就不必经常查询DOM
• 您甚至可以在DOM之外缓存它，因此您只需要在需要切换显示时访问它（请参阅）
如果DOM更新仍然花费太长时间，考虑a）在操作B中隐藏完整的UL），当它们的计数低于某个数时，只显示任何结果。

当然，只有当列表内容没有动态更改时（或者至少每次都需要重建缓存），缓存才适用

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

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

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

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

有几点：

• 不要为每个搜索的列表项重新创建正则表达式
• 使用正则表达式的

  test

  方法，而不是

  match

• 将搜索到的文本（srvClientName）缓存到某个地方，这样就不必经常查询DOM
• 您甚至可以在DOM之外缓存它，因此您只需要在需要切换显示时访问它（请参阅）
如果DOM更新仍然花费太长时间，考虑a）在操作B中隐藏完整的UL），当它们的计数低于某个数时，只显示任何结果。

当然，只有当列表内容没有动态更改时（或者至少每次都需要重建缓存），缓存才适用

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

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

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

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

---

您到底遇到了哪些性能问题？正则表达式是否很慢，页面是否有太多的元素在状态切换时挂起？很难从您的问题中分辨出移动

var exp

到

$之外。每个

对应一个。它使用

值

，因此不需要每次迭代都创建一个

新的RegExp

。只需按每个键执行一次您想要的是

.text（）

而不是

.html（）

，不是吗？没有人搜索HTMl实体：-）您到底遇到了什么性能问题？正则表达式是否很慢，页面是否有太多的元素在状态切换时挂起？很难从您的问题中分辨出移动

var exp

到

$之外。每个

对应一个。它使用

值

，因此不需要每次迭代都创建一个

新的RegExp

。只需按每个键执行一次您想要的是

.text（）

而不是

.html（）

，不是吗？没有人搜索HTMl实体：-）OP根本不使用Ajax？@Bergi，OP特别问他是否应该执行服务器请求以进行优化。除了ajax，你还知道其他处理服务器请求的方法吗？哎呀，我错过了他考虑联系服务器的机会。不幸的是，在您编辑帖子之前，我无法删除下一票：-/@Bergi，只需再次单击下箭头即可重置您的投票。否则，请刷新页面。你可以回忆投票。“你上次对这个答案投票[很久以前]。你的投票现在被锁定，除非这个答案被编辑”-当然我可以自己编辑：-）OP根本不使用Ajax？@Bergi，OP特别问他是否应该