Производительность при добавлении больших элементов / наборов данных в dom

Я добавляю большое количество элементов строки таблицы за раз и испытываю некоторые серьезные узкие места. В настоящий момент я использую jQuery, но я открыт для решения на основе javascript, если оно выполнит свою работу.

Мне нужно добавить где-нибудь от 0 до 100 строк таблицы в данный момент (на самом деле потенциально больше , но я буду разбивать на страницы все, что больше 100).

Прямо сейчас я добавляю каждую строку таблицы индивидуально в дом ...

loop {
  ..build html str...
  $("#myTable").append(row);
}

Затем я постепенно добавляю их все сразу

$("#myTable tr").fadeIn();

Есть пара вещей, которые нужно рассмотрим здесь ...

1) Я привязываю данные к каждой отдельной строке таблицы, поэтому я в первую очередь переключился с массового добавления на добавление отдельных строк.

2) Мне очень нравится эффект затухания. Хотя это и не важно для приложения, я очень разбираюсь в эстетике и анимации (это, конечно, не отвлекает от использования приложения). Просто должен быть хороший способ применить умеренный эффект затухания к большим объемам данных.

(править) 3) Основная причина, по которой я подхожу к этому меньшим / рекурсивным способом, заключается в том, что мне нужно привязать определенные данные к каждой строке. Я неправильно привязываю свои данные? Есть ли лучший способ отслеживать эти данные, чем связывать их с соответствующими tr ?


Что лучше: применять манипуляции с эффектами / домами большими или меньшими фрагментами в рекурсивных функциях?

Бывают ситуации, когда лучше сделать то или иное? Если да, то каковы индикаторы выбора подходящего метода?

6
задан Derek Adair 20 December 2010 в 17:34
поделиться