Оптимизация работы с DOM

Современные браузеры стараются оптимизировать процесс отрисовки страницы без вмешательства разработчика. Тем не менее, изменение DOM-дерева это дорогая операция, поэтому необходимо стараться минимизировать количество обращений к DOM.

Repaint - происходит, когда изменения затронули стили влияющие на внешний вид элемента, но не на геометрию. Например opacity, background-color, visibility и outline. Браузер отрисовывает элемент заново, с учётом нового стиля. Также проверяется видимость других элементов, один или более могут оказаться скрыты под изменившим внешний вид.

Reflow - происходит когда изменения затрагивают содержимое, структуру документа, положение элементов. Идет пересчет позиционирования и размеров, что ведет к перерисовке части или всего документа. Изменение размера одного родительского контейнера повлияет на всех его детей и предков. Имеет значительно большее влияние на производительность, чем repaint.

Все вышеперечисленные операции блокируют браузер. Страница не может выполнять никакие другие операции в то время, когда происходит reflow или repaint. Причинами могут быть:

• Манипуляции с DOM (добавление, удаление, изменение, перестановка элементов)

• Изменение содержимого, в т.ч. текста в полях форм

• Расчёт или изменение CSS-свойств

• Добавление и удаление таблиц стилей

• Манипуляции с атрибутом class

• Манипуляции с окном браузера (изменения размеров, прокрутка)

• Активация псевдоклассов (например :hover