javascript - 无法解决 JavaScript 性能问题

Question

我正在尝试用 jquery 编写一个项目定位器。基本上，我有一个包含约 350 个项目的表。每个项目都有 3 个内容:项目名称、代码和单位尺寸。 表格中的每一行都有“item”类，并且每行中都有“dcode”、“item-name”或“unit-size”类来描述其显示的数据

我想在顶部放置一个输入搜索字段，以便实时搜索表中的行。一页上可以有多个表格，但一次只能看到一个表格(有一些选项卡可以选择显示哪个表格)。因此，我希望有一个输入字段来查找可见表格，然后对其进行搜索。

这是一个示例表:

<table>
  <tr class="item">
       <td class="item-name">Item name #1</td>
       <td class="code">001</td>
       <td class="unit-size">100ml</td>
  </tr
</table>

这是我的 JavaScript

$(function(){

  var $itemsFoundCount = $("#itemsFound #count");

  if($(".nav-tabs").length !== 0) {

    $(".nav-tabs, .nav-tabs li a").click(function(){

      $("#itemFilter").val('').keyup();

      // Wait until view updates to count...      
      setTimeout(function() {
        $itemsFoundCount.html($(".item:visible").length); 

      }, 0);

    });
  }

  $("#itemFilter").keyup(function(){
    var filter = $(this).val().toLowerCase();

    var $allItems = $(".table:visible .item");

    if(filter === '') {
      $allItems.show();
      $itemsFoundCount.html($allItems.length);
      repaintRows();
      return;
    }

    $allItems.each(function(){
      var itemName = $(this).find('.item-name').html().toLowerCase(),
      code = $(this).find('.code').html().toLowerCase(),
      unitSize = $(this).find('.unit-size').html().toLowerCase(), itemType;

      if(itemName.indexOf(filter) == -1 && code.indexOf(filter) == -1 && unitSize.indexOf(filter) == -1) {
        $(this).hide();
      }
      else {
        $(this).show();
      }

    });

    $itemsFoundCount.html($(".item:visible").length);

  });

});

itemFilter 是 id="itemFilter"的输入

这在台式电脑上效果很好，但在 iPad 和手机上却慢得离谱。

我该怎么做才能让它运行得更快？

谢谢!

Answer 1

您的所有搜索都会查询 dom。这需要时间并且表现不佳。

在应用程序上开始将表数据复制到数组中并在那里执行搜索。

您可以从表中填充数组，如下所示:

var data = new Array();

遍历表格的所有行并像这样填充数据

data.push([item-name, code, unit-size]);

或者通过其他方式(json)加载数据并从数据创建表。这样，通过线路传输的数据就会减少，因为 json 文件不包含每行的所有冗余 html 标签。

稍后对数据进行搜索算法。条目的位置与表行相同。例如 jQuery 选择器 nth-child 来查找访问该行。

更好的执行方法是保存对数据中行的引用:

data.push([THE_ROW, item-name, code, unit-size]);

这样你就可以直接寻址它们，而不必每次都在 DOM 中搜索它们。

请记住，THE_ROW 必须是 jQuery 元素才能使 jQuery 方法发挥作用。您可以从 HTMLElement 创建 jQuery 元素，如下所示: $(htmlElement)