Что самый эффективный путь состоит в том, чтобы управлять большими наборами данных с Javascript/jQuery в IE?
У меня есть поиск, который возвращает JSON, который я затем преобразовываю в HTML-таблицу в JavaScript. Это неоднократно называет jQuery.append () методом, однажды для каждой строки. У меня есть современная машина, и время отклика Firefox приемлемо. Но в IE 8 это невыносимо медленно.
Я решил переместить преобразование от данных до HTML в серверную сторону PHP, изменив тип возврата от JSON до HTML. Теперь, вместо того, чтобы назвать jQuery.append () временем неоднократно, я называю jQuery.html () методом однажды со всей таблицей. Я заметил, что Firefox стал быстрее, но IE стал медленнее.
Эти результаты анекдотичны, и я не сделал никакого сравнительного тестирования, но производительность IE очень неутешительна. Есть ли что-то, что я могу сделать для ускорения управления большими объемами данных в IE, или это - просто плохая идея обработать очень много данных сразу с AJAX/Javascript?
4 ответа
Как уже упоминалось, чрезмерные манипуляции с DOM убивают производительность. Создание строки HTML с использованием вышеупомянутого Array.join ('') и установка innerHTML контейнера с помощью метода jQuery.html () выполняется на несколько порядков быстрее. С осторожностью используйте jQuery.append (html) - это эквивалентно созданию сначала всех узлов DOM, а затем их вставке!
Дело в том, что даже если вы оптимизируете создание дерева узлов страницы, вы все равно довольно быстро достигнете потолка с очень большими наборами данных. Браузеры просто не могут обрабатывать такие большие и сложные деревья DOM. Первое, что вы заметите, это замедление взаимодействия (анимация, обработчики и т. Д.), Даже если вы используете делегирование событий. Если ваш набор данных действительно велик, вам нужно будет выполнить какую-то виртуализацию, чтобы показать только то, что видно в области просмотра (это то, что делает SlickGrid - http://github.com/mleibman/slickgrid ) .
В качестве альтернативы, вы можете улучшить отзывчивость и «время до интерактивности» вашей страницы, разбив ваши дополнения DOM на части и выполняя их по таймауту одно за другим с некоторой паузой между ними, чтобы позволить браузеру обрабатывать пользовательские события.
Другие методы включают рендеринг первой страницы данных, выделение места для других, но рендеринг только тогда, когда пользователь начинает прокручивать к ней. Это то, что делает Facebook.
Множественные операции добавления 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(''));
Я настоятельно рекомендую плагин шаблонов jQuery,
Я использую функцию микро-шаблонов Джона Ресига в течение нескольких месяцев. Плагин шаблонов - это эволюция этого. Я писал и представлял его весь год :)
Я делал это раньше. Это все манипуляции с DOM, которые замедляют работу из-за того, что процесс перерисовки / перекомпоновки запускается после каждого добавления.
Создайте его как строку на клиенте, вставьте строку в DOM, используя .html () .
У меня это сработало довольно успешно, даже в IE6.