Как я могу дополнительно оптимизировать создание / вставку строк таблицы JavaScript?

Question

Я использую jQuery. У меня есть функция веб-сайта, которая выполняет поиск ajax и возвращает результат JSON. Затем обратный вызов ajax заполняет строки таблицы результатами. Как правило, в поиске вставляется 100 строк. В каждой строке содержится достаточное количество данных.

Код выглядит примерно так (очень сокращенно):

function search() {

  $.post("/search.php", { params: search_params }, searchDone, "json");

}

function searchDone(json) {

    var $table = $("#result_table");
    var html = "";
    for(i=0; i < json.results.length; i++) {

       html += rowHtml(results[i]);

    }

    $table.append(html);

}

function rowHtml(result) { /* much simplified version */

  var html = "<tr><td>";
  html += result.field1;
  html += "</td><td>";
  html += result.field2;
  html += "</td></tr>";
  return html;

}

Производительность низкая. Браузер имеет тенденцию блокироваться, когда html добавляется к таблице.

Какой-нибудь совет, как это оптимизировать? Было бы лучше для меня создать dom-узлы, чем пытаться заставить jQuery отображать HTML-код?

Answer 1

Вы можете попытаться передать массив, а затем добавить его с помощью array.join.

Вы всегда добавляете в таблицу? Если нет, вы должны обернуть все строки в теле, а затем заменить существующий узел тела. Это быстрее, так как на самом деле это только одно добавление, а не х.

ОБНОВЛЕНИЕ

Тесты производительности здесь от мистера Падолси

Answer 2

jQuery берет все эти <tr> в html-строке и создает их как узлы DOM (быстро), добавляя их один за другим (медленно).

Попробуйте использовать один <tbody> для хранения ваших строк, тогда jQuery должен добавить только 1 элемент в таблицу:

var html = ["<tbody>"];
for(i=0, len=json.results.length; i < len; i++) {

   html.push(rowHtml(json.results[i]));

}
html.push("</tbody>");
$table.append(html.join(''));

Как вы можете видеть, я также сделал несколько других микрооптимизаций: кэшируйте свойство .length в цикле, а используйте массив как строковый буфер . Они не приносят вам много пользы, но их стоит знать.

Answer 3

Установить все HTML сразу, вместо того чтобы полагаться на вставку DOM.

function searchDone(json) {
    var $table = $("#result_table");
    var html = $table.html();
    for(i=0; i < json.results.length; i++) {
       html += rowHtml(results[i]);
    }
    $table.html($table.html() + html);
}

Answer 4

Немного не по теме, но я использую и рекомендую Javascript Rocks . Эта книга содержит ТОННУ удивительных советов по оптимизации JS от создателя Scriptaculous. Также поставляется с инструментом под названием DOM Monster, который помогает отследить узкие места в производительности - это потрясающий комплимент Firebug, поскольку он фактически отслеживает DOM в поисках неэффективности, основанной на эвристике и сложности DOM.

Answer 5

Вы также должны использовать более быструю версию цикла for, например: var $ table = $ ("# result_table"); var html = "";

for(var i=0, var len= json.results.length; i < ; i++) {

  // etc...

}

Answer 6

Вы можете использовать setTimeout вместо цикла for. Он не заблокирует браузер при построении длинной строки HTML. Вы также можете попробовать добавить его как целое тело вместо строк.

Answer 7

Здесь могут быть некоторые указатели:

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

В целом кажется, что использование Array.join против конкатенации строк для увеличения скорости - это развеянный миф, или я должен сказать, что в более ранних версиях браузеров, Array.join был быстрее. Но последние версии браузеров значительно оптимизировали конкатенацию строк.