加速 jQuery/Javascript 搜索功能

Question

我有一个包含 3000 多个具有唯一名称的项目的列表。它们都像这样包裹在 UL 标签内：

<ul>
    <li><a href="#"> Item_ID125167</a></li>
    <li><a href="#"> Item_ID146324</a></li>
</ul>

然后我有一个这样的搜索输入：

<input type="text" id="searchfield" class="form-control" placeholder="Search">
<span class="input-group-addon">
    <button type="submit" id="searchButton" onclick="filterByName()">
        <span class="glyphicon glyphicon-search"></span>
    </button>
</span>

最后是隐藏/显示匹配项的功能：

function filterByName() {
  $("li").each(function(index) {
    if ($(this).children('a').text().toUpperCase().indexOf($("#searchfield").val().toUpperCase()) > -1) {
      $(this).css('display', "");
    } else {
      $(this).css('display', "none");
    }
  });
}

在使用旧的 android 手机时，这感觉有点慢，有 3000 多个项目。搜索功能有更好的解决方案吗？

Answer 1

加快速度意味着您应该尽可能地重用资源

var $list = {}; // initialize an empty global scope variable to keep your elements in
function filterByName(searchString) {
  //reusing $list will prefent you from walking the dom each time
  $list.each(function(index, el) {
    el.style.display = el.title.indexOf(searchString) > -1 ? "list-item" : "none";
  });
}

function loadList() {
  $list = $('#results').find('li'); //faster than $('#results > li');
  $list.each(function(index, el) {
      //save the uppercase search values in a propery to search faster
      //this saves you from running .toUpperCase() on every search
      var text = el.textContent || el.innerText;
      el.setAttribute('title', text.trim().toUpperCase()); //using title makes a faster search later
      $list[index]=el;
  }); 
}

$(function() {
    loadList();
  $('#searchButton').click(function(e){
    e.preventDefault();
    //prepariung the search sring here saves processing during search
    filterByName($("#searchfield").val().trim().toUpperCase());
    return false;
  });
  //if your list is build dynamicly simple run loadList() every time changes to the list content may happen
});

看到一个有效的小提琴 https://jsfiddle.net/q1x7ujex/

Answer 2

根据我的测试，find 在这种情况下会比children 运行得更快。
你可以通过Test selectors自己运行，或者查看结果：。

如果您的眼睛没有任何改善，您可以使用我添加到您的功能中的console.time查看结果，它会记录操作到浏览器所花费的时间。

function filterByName() {
 //Instead of selecting the search field + getting it's value + toUpperCase 
 //*3000 times this way it will only happen once.
 var searchVal = $("#searchfield").val().toUpperCase();

//measures the time it takes for the operation
 console.time("test");
 $("li").each(function() {

    //find is faster than children
    if ($(this).find("a").text().toUpperCase().indexOf(searchVal >-1)) {
        this.style.display = '';
    } else {
        this.style.display = 'none';
    }
});
//Will write to the console the time it the operation took.
console.timeEnd("test");
}

Answer 3

我希望这段代码比你的代码运行得快一点。试试看

function filterByName() {
    var searchVal = $("#searchfield").val.toUpperCase();
    $("li").each(function() {
        if (this.children[0].textContent.toUpperCase().match(searchVal)) {
            this.style.display = '';
        } else {
            this.style.display = 'none';
        }
    });
}

Answer 4

据此页面：https://learn.jquery.com/performance/optimize-selectors/

你必须使用find 而不是children（它说超级快）

您可以做的其他事情是从该列表创建一个数组并使用jQuery.inArray