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

Question

Я экспериментирую с jQuery, JSON и т. Д. И наткнулся на следующую задачу. У меня есть скрипт загрузчика на сервере, который возвращает данные таблицы в формате 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-код на сервере и отправьте его в виде строки, которую я включил в таблицу, это будет довольно быстро.

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

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

Answer 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('')); 

Answer 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-кода.

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