解决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)