Javascript эффективно создает таблицу из JSON и добавляет ее в DOM

У меня есть массив JSON, приходящий с сервера, с массивом из 200 объектов, каждый из которых содержит еще 10 объектов, которые я хочу отобразить в формате таблицы. Сначала я создавал для каждой итерации и использовал jQuery для добавления , построенного из значений массива, в . Это занимало около 30 секунд в Chrome и 19 секунд в IE 8. Это занимало слишком много времени, поэтому я попытался переключиться на метод Array.join () , где я буду хранить каждую строку, которая будет составлять всю таблицу в массив, а в конце сделать $ ('# myTable'). append (textToAppend) .На самом деле это было хуже, чем у моей первой версии, примерно на 5 секунд.

Я бы хотел сократить это время до 10 секунд. Есть ли у меня на это шанс? Если нет, я просто буду добавлять по одной строке за раз, но я бы не стал этого делать.

for(allIndex = 0; allIndex < entries.alumnus.length; allIndex++){

  var entry = '<tr id="entry' + allIndex + '" class="entry"></tr>';
  $('#content_table').append(entry);

  $('#entry' + allIndex).append(($.trim(entries.alumnus[allIndex].title) != '' ?
        '<td id="title' + allIndex + '" class="cell"><span class="content">' +
         entries.alumnus[allIndex].title + '</span></td>' : '<td width="5%">' + 
         filler + '</td>'));    
  .
  .
  .
  .//REST OF ELEMENTS
  .
  .
  .
}   

ОБНОВЛЕНИЕ: Я, должно быть, вчера что-то напортачил, потому что я вернулся к попытке добавить элементы из DOM, а затем присоединить их позже, без использования jQuery, и у меня время уменьшилось до 85 мс в Chrome и 450 мс в IE7 !!! Вы молодцы !!! Я дал user1 ответ, потому что он был более исчерпывающим, и использование фрагментов не сильно повлияло на мое время в Chrome и добавило около 20 мс в IE7. Но я все еще ценю ответ @Emre Erkan и буду использовать чаще :)

8
задан Eliezer 6 January 2012 в 08:05
поделиться