Можно ли отсортировать таблицу HTML без зависания браузера?

Question

Я написал веб-страницу с таблицей HTML, которая содержит сотни строк. Я запрограммировал свою страницу на JavaScript, чтобы пользователь мог щелкнуть заголовок в верхней части любого столбца, чтобы отсортировать таблицу по этому столбцу.

Работает хорошо, но занимает немного времени, потому что строк так много. Я использую метод JavaScript array.sort для сортировки базовых данных, которые затем используются для записи строк данных на страницу.

Проблема в том, что когда пользователь нажимает на заголовок, браузер останавливается до завершения операции. Можно ли как-то запрограммировать мою страницу, чтобы браузер не зависал во время сортировки таблицы?

Answer 1

Если сортировка таблицы в вашем случае - действительно тяжелая операция, то я предлагаю выполнить сортировку на стороне сервера с использованием AJAX, ИЛИ взглянуть на эту новую игрушку Веб-работник HTML 5 . Браузер является однопоточным, поэтому поток пользовательского интерфейса не должен отвечать на запросы, поскольку он блокируется каждый раз, когда ваш код выполняет дорогостоящую операцию на стороне клиента, которая не заключена в неблокирующий метод обратного вызова.

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

Answer 2

Лучше всего, вероятно, использовать существующую библиотеку HTML-таблиц / виджетов, которая, по-видимому, уже решила эту проблему.Несомненно, многие могут быть найдены при поиске в Интернете.

Вы можете выполнить тяжелую работу (например, сортировку) элементов на сервере с помощью Ajax-запроса и просто заменить существующий элемент таблицы DOM на тот, который был возвращенобработчик сортировки сервера.

Вы также можете написать свою собственную функцию сортировки, которая возвращает управление обратно в поток пользовательского интерфейса браузера соответствующим образом (например, путем разложения алгоритма сортировки из его естественного цикла в цикл, управляемый с помощью * 1005).* или setInterval).

Answer 3

Браузер "зависает" из-за постоянного перерисовывания страницы - просто перерисовать его один раз.

Вы можете отобразить: нет таблицы, отсортировать ее, а затем отобразить снова.

Или вы можете создать новую отсортированную таблицу вне экрана и заменить существующую таблицу отсортированной версией.

Answer 4

Один из способов сделать это - выполнить сортировку элементов на сервере с помощью ajax.

<div id="tableContainer">
   <table>...</table>
</div>

$.ajax({
   url: "/sort"
   data: {items:items, sortField:"id"},
   dataType:"html",
   success: function(sortedTable){
      $("#tableContainer").html(sortedTable);
   }
}