基于动态文本输入优化jQuery脚本隐藏/显示1000项集中的项

Question

我为一个页面编写了以下脚本，该页面已经加载了大约1000个项的数据集(全部都在一个服务器调用中--没有AJAX)。脚本将文本输入转换为CSS标准的字符串(移除空格、小写等)，然后将该字符串与我加载的每个项目的CSS类匹配，并相应地为该元素调整“隐藏”或“显示”。

$(document).ready(function(){
    $('ul.players li').hide();      
    $("#filter-input").keyup(function () {
        var lowercase = $(this).val().toLowerCase();
        var spaced = lowercase.replace(/[ _]/, '-');
        var outputString = spaced.replace(/[^a-z-]/i, '');
        $('ul.players li').hide();      
        $('ul.players li[class*="'+outputString+'"]').show();
    });
});

它正在处理的HTML示例：

<form>
    <input id="filter-input" type="text" />
</form>
<ul class="players">
    <li class="firstname lastname teamname position cityname">
        <div>Basic player info here...</div>
    </li>
</ul

这个脚本运行得很好(在我需要它工作的简单容量中)--但是它非常滞后。为了性能，我能做些什么来优化它呢？

(显然，在这许多元素之间有很多类的切换-我想我无法避免--但也许在字符串转换方面还有一些事情要做)

Answer 1

您可以尝试在匹配它们的头部插入一个<style>元素--这样会快得多。

 $('head').append('<style id="player-style"></style>');

当按下键时-编辑此样式：

 $('#player-style').html('.' + outputString + ' { display: block }');

请注意，您可能不得不使用.text()来替换内容--还没有尝试过。

只需提到，您将需要更多的CSS来隐藏所有的ul.players li，并只显示所需的与上述技巧。我认为这将足够快，因为浏览器将进行显示和隐藏。

Answer 2

您希望使您的jQuery选择器尽可能快。通常，按类名选择项很慢。很好，您已经开始使用元素类型(因为这是快速的)选择器。但在可能的情况下，你应该避免选择班级。是否只有一项与$("ul.players")匹配？如果是这样的话，请考虑给它一个ID并使用它。

此外，选择$('ul.players li')是次优的，因为它将尝试匹配列表中的任何"li“元素。但事实上，你实际上想要的是列表的所有直接后代。尝试用$("ul.players").children()替换它。

最后，不要过多地运行选择器，而是将它们存储到一个变量中。这是最后的输出：

$(document).ready(function(){
    var players = $("ul.players").children(),
        output = $("#filter-output");
    players.hide();      
    $("#filter-input").keyup(function () {
        players.hide();      
        output.text($(this).val()
            .toLowerCase()
            .replace(/[ _]/, '-')
            .replace(/[^a-z-]/i, ''));
        players.filter('[class*="'+outputString+'"]').show();
    });
});

我不知道你会得到多少速度增益，但值得一试:)