Шаг 121.
Библиотека jQuery. Работа с таблицами. Сортировка и разбивка на страницы. Сортировка с помощью JavaScript. Проблемы производительности

    На этом шаге мы рассмотрим некоторые вопросы, связанные с производительностью приложения.

    Наша реализация работает, но очень медленно. Проблема заключена в функции сравнения, которая выполняет слишком большой объем работы. В ходе сортировки эта функция вызывается много раз, и, значит, каждое мгновение, которое она тратит на обработку, будет увеличено многократно.

    В действительности стандарты не определяют алгоритм сортировки, который должен использоваться в JavaScript. Он может быть простым, как алгоритм пузырьковой сортировки (сложность которого в наихудшей ситуации составляет O(n2)), или более сложным, как алгоритм быстрой сортировки (сложность которого в среднем составляет O(n*log n)). В любом случае можно с уверенностью сказать, что удвоение числа элементов в массиве увеличит количество вызовов функции сравнения более чем в два раза.

    Исправить ситуацию с низкой скоростью работы нашей функции можно с помощью предварительного вычисления значений сравниваемых ключей. Начнем с текущей медленной версии нашей функции сортировки:

       rows.sort(function(a, b) {
         var keyA = $(a).children('td').eq(column).text().toUpperCase();
         var keyB = $(b).children('td').eq(column).text().toUpperCase();
         if (keyA < keyB) return -1;
         if (keyA > keyB) return 1;
         return 0;
      });

    Мы можем организовать вычисление ключей в отдельном цикле:

  $.each(rows, function(index, row) { 
    row.sortKey = $(row).children('td').eq(column).text().toUpperCase();
  });  
  rows.sort(function(a, b) { 
    if (a.sortKey < b.sortKey) return -1; 
    if (a.sortKey > b.sortKey) return 1; 
    return 0;
  });
  $.each(rows, function(index, row) { 
    $table.children('tbody').append(row); 
    row.sortKey = null;
  });

Рис.1. Изменение функции сортировки

Полный текст этого примера можно взять здесь.

    В данном цикле мы выполняем все дорогостоящие операции и сохраняем результаты в новом свойстве .sortKey. Такого рода свойства, присоединяемые к элементу DOM, но не являющиеся обычными атрибутами DOM, называются расширенными (expando). Это удобное место для хранения ключа, так как нам необходимо иметь по одному такому свойству для каждого элемента строки таблицы. Теперь внутри функции сравнения можно использовать данный атрибут, благодаря чему скорость сортировки увеличится.


   Примечание. По окончании мы устанавливаем расширенное свойство в значение null, самостоятельно освобождая память. В данном случае так делать не совсем обязательно, но это хорошая привычка, чтобы взять ее на вооружение, так как разбросанные повсюду расширенные свойства могут стать причиной утечки памяти.

    На следующем шаге мы закончим изучение этого вопроса.




Предыдущий шаг Содержание Следующий шаг