jQuery и добавление больших объемов HTML

Question

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

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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

Answer 4

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

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

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

Answer 5

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

Answer 6

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

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

Answer 7

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

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

Answer 8

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

http://programmingdrunk.com/playground

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

Answer 9

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