无法弄清楚 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 子项来查找访问该行。

一种性能更好的方法是在数据中保存对行的引用：

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

这样，您可以直接解决它们，而无需每次都在 DOM 中搜索它们。

请记住，THE_ROW必须是jQuery元素才能使jQuery方法工作。 你可以从HTML创建一个jQuery元素，如下所示： $(htmlElement)