Как повысить производительность рендеринга jquery?

Question

[komarevtsev]

Мне необходимо отрисовать очень много однообразных html-блоков(около 600 штук)
Для этого я использую jquery $(#id).html(row);
row - строка с html кодом (со всеми 600 сразу)
Отрисовывание занимает 250мс, что разумеется очень много. Разбивать через таймер не подходит по архитектурным причинам. В какую сторону копать?

Comments

[Алексей]

Больше ничего не делается между отрисовками?
Я про reflow - https://habrahabr.ru/post/21177/
Многовато 250мс для добавления одного блока.

Answer 1

[GreatRash]

blog.stevenlevithan.com/archives/faster-than-innerhtml

Comments

[komarevtsev]

Спасибо вам большое, это то что я искал. помогло! а вы сами сталкивались с такой проблемой?

[GreatRash]

komarevtsev: Не совсем с такой, но сталкивался, да.

[komarevtsev]

GreatRash: Лол, у меня перестало работать увеличивать скорость) Вернулось к прежним значениям

[GreatRash]

komarevtsev: У вас случаем не навешиваются обработчики событий затем на эти блоки? Вообще не плохо бы собрать тестовый стенд с кодом.

[komarevtsev]

GreatRash: в текущей версии не навешиваются. а вообще будут. на что обратить внимание?

[komarevtsev]

GreatRash: еще заметил, открываешь вкладку первый раз, все ок, скорость рендера уменьшается. обновляешь страницу - скорость рендера опять 250мс

[GreatRash]

komarevtsev: Внимание нужно обратить на то, чтобы при удалении элементов из DOM обработчики событий тоже удалялись. Или не забывать удалять их вручную перед удалением/обновлением DOM.

Answer 2

[Александр]

Они находятся в одном блоке? Тогда $(#id).html(rows.join('')); То есть объединяем все строки и добавляем их одним разом