如何提高搜索脚本的性能

How can i improve performance of search script?

本文关键字：性能 脚本 搜索 何提高      更新时间：2023-09-26

我有一个包含许多项和一些输入的UL列表。我的脚本在输入和显示或隐藏匹配输入字符串的字段时监听key up。

下面是我的代码: 
$(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);
    });
});

谢谢大家的回答。

几点:

  • 不要为每个搜索列表项重新创建正则表达式。
  • 使用正则表达式的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" ]();
        });
    });
});

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

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

相关文章：