jQuery и добавление большого количества HTML

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

var shtml = '<table>';
for (var i = 0; i < 100; i++) {
  shtml += '<tr><td>A bunch of content</td></tr>';
}
shtml += '</table>';
$('#myTable').append(shtml);

Затем я нашел метод конкатенации строк, который все изменил. Вместо использования += оператора sting используйте массивы для объединения;

var shtml = ['<table>'];
for (var i = 0; i < 100; i++) { 
  shtml.push('<tr><td>A bunch of content</td></tr>');
}
shtml.push('</table>');
$('#myTable').append(shtml.join(''));

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

Ответов (9)

Вчера я возился с добавлением большого количества HTML. Я думаю, что рендеринг на стороне сервера и вставка - это путь, также я могу добавить, что неиспользование jquery быстрее на 50-100 мс в моих тестах, которые здесь:

http://programmingdrunk.com/playground

вам нужно будет включить консоль firebug, чтобы увидеть результаты скорости

Чейз прав, неважно, насколько быстро вы можете сгенерировать HTML с помощью JavaScript, вас убьет вставка DOM. Свяжите любой язык программирования с DOM, и это будет медленным.

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

Вы рассматривали возможность использования библиотеки шаблонов? Например, PURE имеет очень хорошую производительность (попробуйте пример с 500 строками).

Вероятно, вы получите лучшую производительность, если будете генерировать HTML на стороне сервера, а затем использовать Ajax для получения html и добавления его в свою DOM. (Я предполагаю, что вы все равно получаете все данные с сервера, используя Ajax.)

Попробуйте клонировать части самой модели DOM, а не генерировать ее на лету (т. Е. Добавляйте фактические элементы DOM, чтобы их не нужно было создавать).

Имейте в виду, что часто узким местом в скорости является не создание модели DOM, а ее вставка . Это особенно верно для IE со сложными таблицами стилей и когда новый контент содержит много уровней вложенных тегов.

См. http://bitkickers.blogspot.com/2008/12/ajax-grid-performance-in-ie.html

Возникает проблема производительности с jQuery и вставкой большой строки html в DOM из-за функции $ .trim.

Иногда я нахожу простой старый сценарий dom намного быстрее, чем использование jquery. Попробуйте что-нибудь вроде

document.getElementById('id').innerHTML = myarray.join('')

В моем случае document.getElementById ('id'). InnerHTML = myarray.join ('') также является убийцей, поскольку массив имеет 10 строк HTMl. Объединения будут создавать большую длинную строку, а производительность nnerHTML значительно варьируется от 100 до 1200 мс в IE 7.

какие-нибудь подсказки?

Я думаю, вы можете разбить html на множество частей и добавлять их одну за другой.

$("table tr:last").after('<tr>...</tr>');

Как строки документа в googleDocs