Какой самый эффективный способ управления большими наборами данных с помощью Javascript / jQuery в IE?

Question

У меня есть поиск, который возвращает JSON, который я затем преобразую в таблицу HTML в Javascript. Он неоднократно вызывает метод jQuery.append (), по одному разу для каждой строки. У меня современная машина, и время отклика Firefox приемлемо. Но в IE 8 это невыносимо медленно.

Я решил перенести преобразование данных в HTML в серверный PHP, изменив тип возвращаемого значения с JSON на HTML. Теперь вместо того, чтобы повторно вызывать время jQuery.append (), я вызываю метод jQuery.html () один раз для всей таблицы. Я заметил, что Firefox стал быстрее, но IE стал медленнее.

Эти результаты анекдотичны, и я не проводил никаких тестов, но производительность IE очень разочаровывает. Есть ли что-то, что я могу сделать, чтобы ускорить манипулирование большими объемами данных в IE, или это просто плохая идея, чтобы обрабатывать очень много данных одновременно с AJAX / Javascript?

Answer 1

Как уже упоминалось, чрезмерные манипуляции с DOM снижают производительность. Создание строки HTML с использованием вышеупомянутого Array.join ('') и установка innerHTML контейнера с помощью метода jQuery.html () на несколько порядков быстрее. Будьте осторожны с использованием jQuery.append (html) - это эквивалентно сначала созданию всех узлов DOM, а затем их вставке!

Дело в том, что даже если вы оптимизируете создание дерева узлов страницы, вы все равно довольно быстро достигнете потолка с очень большими наборами данных. Браузеры просто не могут обрабатывать такие большие и сложные DOM-деревья. Первое, что вы увидите замедление, это взаимодействие (анимация, обработчики и т. Д.), Даже если вы используете делегирование событий. Если ваш набор данных действительно большой, вам потребуется выполнить какую-то виртуализацию, чтобы показать только то, что видно в области просмотра (это то, что делает SlickGrid - http://github.com/mleibman/slickgrid).

В качестве альтернативы, вы можете улучшить отзывчивость и «время до интерактивности» вашей страницы, разбивая ваши добавления DOM и выполняя их по таймауту один за другим с некоторой паузой между ними, чтобы браузер мог обрабатывать пользовательские события.

Другие методы включают визуализацию данных на первой странице, выделение места для большего, но только рендеринг, когда пользователь начинает прокручивать к нему. Это то, что делает Facebook.

Answer 2

Я делал это раньше.Это все манипуляции с DOM, которые замедляют процесс из-за запуска процесса перерисовки / перекомпоновки после каждого добавления.

Создайте его как строку на клиенте, вставьте строку в DOM, используя .html().

Это сработало довольно успешно для меня, даже на IE6.

Answer 3

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

Сохраняйте данные как можно меньшими (массивы JSON хороши) и создавайте HTML в сценарии, избегая проблемы конкатенации строк JavaScript. Добавьте значения html в массив, а затем присоединитесь к массиву. Сделайте одно добавление DOM, как только HTML будет создан. например,

var builder = [];

//Inside a loop
builder.push('<tr><td>');
builder.push(json.value);
builder.push('</tr>');

//Outside the loop
$('div').append(builder.join(''));

Answer 4

Я настоятельно рекомендую шаблонный плагин jQuery,

Я использую функцию микро-шаблонов Джона Резига в течение нескольких месяцев. Шаблонный плагин - это эволюция этого. Я писал и представлял на нем весь год:)

Мой блог