Самый оптимальный вариант добавить в DOM 50+ блоков?

Question

[Extramezz]

Получаю AJAX-ом данные. Из них формирую новые DOM-элементы. В общем, получается у меня 50+ элементов с текстом, картинками и прочим. Добавляю в DOM разом, через $.append:

var elems = [elem, elem, elem...];
$("#dump").append(elems);

Но все это дело до жути затормаживает браузер, как этого избежать? Добавлять по одному? Перевести в HTML и добавить через $.html? Использовать documentFragment или...? Какой наиболее верный и шустрый способ?

Answer 1

[Константин Громов]

Для перевода в html вам всё-равно придётся добавлять все элементы в один контейнер, чтобы брать его innerHTML. То есть вы будете делать ту же самую вставку, разве что в памяти, плюс вставка уже самого текста в dom, из которого потом браузер по новой будет создавать объектное представление элементов. Слишком много мусора получается.

Как вариант решения, можно саму вставку проводить нативными средствами. jsfiddle.net/bpd7b1dx тут наглядно видна разница в скорости.

Насчёт documentFragment'а сказать ничего не могу, читал лишь, что в современных браузерах он особой пользы не несёт, но в таком же тесте на 1000 элементов был прирост на ~20% в сравнении с обычной нативной вставкой.

Comments

[Константин Громов]

Денис Иванов: Левый операнд оператора in должен быть строкой, подразумевающей название свойства. В вашем примере null автоматически приводится к ней и получается "null". Divs это массив и такое свойство у него отсутствует, в итоге ваша проверка внутри while возвращает false и тело цикла ни разу не выполняется: вставки нет.

Возможно вы имели ввиду это: jsfiddle.net/fydctsya/4, но, как я и говорил, ничего хорошего из этого не получается.

[Алексей Ostin]

Кстати, а почему хром в Debug-панели не отображает добавленные DIV'ы?
Значит ли это, что он их не добавил? :)

[Константин Громов]

Алексей Ostin: В конце обоих обработчиков container сразу очищается, чтобы не загрязнять расчёты при последующих кликах нагрузкой на память. Можете закомментировать строки container.innerHTML = ""; если хотите.

[Алексей Ostin]

Проглядел, спасибо. My bad.

Answer 2

[Алексей Ostin]

Попробуйте использовать DocumentFragments, это должно заметно снизить нагрузку на браузер.

www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#...
ejohn.org/blog/dom-documentfragments
javascript.ru/optimize/documentfragment-0

и пример с jquery:
jsfiddle.net/hc5ED/6

Comments

[Алексей Ostin]

Денис Иванов: вторая и третяя ссылка, например.

[Алексей Ostin]

Денис Иванов: логично, что при работе с элементарными объектами использование DocumentFragment дает оверхед, поскольку при одинаковом результате добавляется дополнительная операция на работу с фрагментом.

Однако, самая ресурсоемкая операция при вставке сложных объектов - отрисовка. При итеративной вставке отрисовка происходит на каждой итерации, тогда как при использовании фрагмента - один раз.

[Алексей Ostin]

+1
Может быть топикстартер поделится результатами оптимизации.

[Extramezz]

Алексей Ostin: особой разницы нету, но все равно, всем объявляется благодарность!