Быстрый способ динамического заполнения таблицы данными из JSON в JavaScript

Я экспериментирую с jQuery, JSON и т.д. и столкнулся с следующей задачей. У меня есть загрузчик script на сервере, который возвращает данные таблицы в формате JSON. Получив данные JSON, я хочу заполнить таблицу ими. В настоящее время я использую код, похожий на следующий (есть больше столбцов и более продвинутая обработка, но у вас есть идея):

...
for (var key=0, size=data.length; key<size;key++) {

  $('<tr>')
            .append( $('<td>').html(
                data[key][0]
            ) )
            .append( $('<td>').addClass('whatever1').html(
                data[key][1]
            ) )
            .append( $('<td>').addClass('whatever2').html(
                data[key][2]
            ) )
            .appendTo('#dataTable');
}
...

<table id="#dataTable"></table>
...

Это работает очень хорошо. Но как только данные растут, он становится очень медленным. Для нескольких записей записей требуется около 5 секунд (Firefox, IE) для построения таблицы, и это немного медленнее. Если я, например, создайте весь HTML на сервере и отправьте его как строку, которую я включу в таблицу, это будет довольно быстро.

Итак, есть ли более быстрый способ заполнить таблицу?

ПРИМЕЧАНИЕ: Я знаю, что такое пейджинг, и я буду использовать его в конце, поэтому, пожалуйста, не говорите: "Для чего вам нужна такая большая таблица на вашей странице?". Этот вопрос касается того, как быстро заполнить таблицу, независимо от того, сколько записей вы покажете:)

Ответ 1

Посмотрите мой ответ на более ранний аналогичный запрос с использованием массивов и "join".

Не используйте jQuery вообще до самого конца, когда вы вызываете его только один раз. Кроме того, вырезать конкатенацию строк также, сохраняя строки в массиве и используя метод "join" для построения строки за один раз.

например.

 var r = new Array(), j = -1;
 for (var key=0, size=data.length; key<size; key++){
     r[++j] ='<tr><td>';
     r[++j] = data[key][0];
     r[++j] = '</td><td class="whatever1">';
     r[++j] = data[key][1];
     r[++j] = '</td><td class="whatever2">';
     r[++j] = data[key][2];
     r[++j] = '</td></tr>';
 }
 $('#dataTable').html(r.join(''));

Ответ 2

Попробуйте отложить добавление таблицы в текущую DOM до тех пор, пока она не будет как можно позже.

var table = $('<table>');   // create a new table

// populate the rows
....  .append(table);

// replace the existing table all in one go
$('#dataTable').replaceWith(table);

Это должно помешать любой макет страницы, пока вся таблица не будет готова.

Если производительность является реальной проблемой, я бы также избегал вызова методов, требующих синтаксического анализа строк, как и все эти вызовы $('<td>'). Для одного элемента накладные расходы на это, вероятно, довольно дороги (хотя это стоит того, если у вас длинная строка HTML).

Как я понимаю, добавление больших строк тегов с использованием .append() или .html() должно быть довольно эффективным. То, что вы потеряете, - это контроль, который вы бы использовали, если бы вы использовали .text() для заполнения ячеек таблицы, чтобы избежать инъекции кода HTML.

Ответ 3

Вероятно, быстрее построить HTML для всей строки и добавить строку в таблицу, а не добавлять каждый отдельный элемент по одному. Вы также можете расширить это до построения всего HTML в строке, а затем добавить все за один раз, что было бы еще быстрее. В среде MVC я бы, вероятно, вернул частичный вид (HTML), в котором есть таблица, поскольку это обеспечит разделение проблем. Однако я бы избежал создания HTML на сервере (в контроллере), поскольку это означало бы, что вам придется менять код, когда вы хотите изменить способ отображения таблицы. Если вы используете PHP или другой язык сценариев, отфильтруйте в соответствии с условиями вашей среды.

var html = '';
for (var key=0, size=data.length; key<size;key++) {

  html += '<tr><td>'
             + data[key][0]
             + '</td><td class="whatever1">'
             + data[key][1]
             + '</td><td class="whatever2">'
             + data[key][2]
             + '</td></tr>';
}

$('#dataTable').append(html);