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);

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

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?


javascript jquery ajax dhtml
person MonkeyBrother    schedule 26.02.2009    source источник
comment
Наблюдение: в вашем примере вы действительно демонстрируете повышение производительности за счет встроенной обработки строк и массивов Javascript, а не jQuery.   -  person Matt Howell    schedule 26.02.2009

Ответы (9)


arrow_upward
7
arrow_downward

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

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

document.getElementById('id').innerHTML = myarray.join('')
person Nicolas R    schedule 27.02.2009
comment
Иногда я нахожу простые старые сценарии dom намного быстрее, чем использование jquery. я думаю, это относится к большинству любой JS-инфраструктуры - слишком много вещей происходит под обложками, когда все, что вам нужно, это простое создание/вставка DOM - person matt b; 13.03.2009

arrow_upward
4
arrow_downward

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

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

person Chase Seibert    schedule 26.02.2009

arrow_upward
3
arrow_downward

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

person Dave Ward    schedule 26.02.2009

arrow_upward
1
arrow_downward

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

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

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

person Just Me    schedule 22.03.2011

arrow_upward
1
arrow_downward

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

person Matt Gardner    schedule 26.02.2009

arrow_upward
0
arrow_downward

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

http://programmingdrunk.com/playground

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

person mkoryak    schedule 26.02.2009

arrow_upward
0
arrow_downward

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

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

person jay_soo    schedule 26.02.2009

arrow_upward
0
arrow_downward

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

любые ключи?

person Community    schedule 13.03.2009

arrow_upward
-1
arrow_downward

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

person davogones    schedule 26.02.2009
comment
На самом деле, я обнаружил, что производительность НАМНОГО лучше при создании html на стороне клиента. Самым большим узким местом с html-страницами является использование полосы пропускания, а не процессора. Попробуйте добавить большое количество html в DOM. Вы увидите, что это не очень эффективно. - person MonkeyBrother; 26.02.2009
comment
Зависит от того, как вы его добавляете. innerHTML довольно быстрый. - person Dave Ward; 26.02.2009