javascript - 优化 JS 数组搜索

Question

我正在开发一个基于浏览器的媒体播放器，它几乎完全用 HTML 5 和 JavaScript 编写。后端是用 PHP 编写的，但它有一个功能，就是在初始加载时填充播放列表。剩下的全是JS了。有一个搜索栏可以细化播放列表。我希望它能随着人们打字而完善，就像大多数媒体播放器一样。唯一的问题是它非常慢且滞后，因为整个程序中有大约 1000 首歌曲，并且随着时间的推移可能会更多。

原始播放列表加载是对 PHP 页面的 ajax 调用，以 JSON 形式返回结果。每个项目有 4 个属性:

1. 艺术家
2. 相册
3. 文件
4. 网址

然后，我循环遍历每个对象并将其添加到名为 playlist 的数组中。循环结束时，会创建一个播放列表副本，备份。这样，当人们优化搜索时，我可以优化 playlist 变量，但仍然从 backup 重新填充它，而无需发出另一个服务器请求。

当用户在搜索框中键入按键时，将调用 refine() 方法。它刷新 playlist 并搜索 backup 数组中每个对象的每个属性(不包括 url)以查找字符串中的匹配项。如果任何属性中有匹配项，它会将信息附加到显示播放列表的表中，并将其添加到 playlist 对象中以供实际播放器访问。

refine() 方法的代码:

function refine() {
    $('#loadinggif').show();
    $('#library').html("<table id='libtable'><tr><th>Artist</th><th>Album</th><th>File</th><th>&nbsp;</th></tr></table>");
    playlist = [];
    for (var j = 0; j < backup.length; j++) {
        var sfile = new String(backup[j].file);
        var salbum = new String(backup[j].album);
        var sartist = new String(backup[j].artist);
        if (sfile.toLowerCase().search($('#search').val().toLowerCase()) !== -1 || salbum.toLowerCase().search($('#search').val().toLowerCase()) !== -1 || sartist.toLowerCase().search($('#search').val().toLowerCase()) !== -1) {
            playlist.push(backup[j]);
            num = playlist.length-1;
            $("<tr></tr>").html("<td>" + num + "</td><td>" + sartist + "</td><td>" + salbum + "</td><td>" + sfile + "</td><td><a href='#' onclick='setplay(" + num +");'>Play</a></td>").appendTo('#libtable');
        }
    }
    $('#loadinggif').hide();
}

正如我之前所说，对于输入的前几个字母，这是非常缓慢且滞后的。我正在寻找改进方法，使其更快、更流畅。

Answer 1

1. $('#search') 并不便宜。将其移到循环之外。
2. 将 append() 移到循环之外。只需将标记累积在字符串中并在循环后附加一次即可。

这应该快得多

function refine() {
    $('#loadinggif').show();
    $('#library').html("<table id='libtable'><tr><th>Artist</th><th>Album</th><th>File</th><th>&nbsp;</th></tr></table>");
    playlist = [];
    var srchText = $('#search').val().toLowerCase();
    var markup = ["<tbody>"];
    for (var j = 0; j < backup.length; j++) {
        var sfile = backup[j].file.toLowerCase();
        var salbum = backup[j].album.toLowerCase();
        var sartist = backup[j].artist.toLowerCase();

        if (sfile.search(srchText) !== -1 || salbum.search(srchText) !== -1 || sartist.search(srchText) !== -1) {
            playlist.push(backup[j]);
            num = playlist.length-1;
            markup.push("<tr><td>" + num + "</td><td>" + sartist + "</td><td>" + salbum + "</td><td>" + sfile + "</td><td><a href='#' onclick='setplay(" + num +");'>Play</a></td></tr>");
        }
   }   
   markup.push("</tbody>");
   $("#libtable").append(markup.join(''));
   $('#loadinggif').hide();
}