> For the complete documentation index, see [llms.txt](https://aleksandra-hrevtsova.gitbook.io/senior-front-end-javascript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aleksandra-hrevtsova.gitbook.io/senior-front-end-javascript/dom/optimizaciya-raboty-s-dom.md).

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

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

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

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

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

* Манипуляции с DOM (добавление, удаление, изменение, перестановка элементов)
* Изменение содержимого, в т.ч. текста в полях форм
* Расчёт или изменение CSS-свойств
* Добавление и удаление таблиц стилей
* Манипуляции с атрибутом `class`
* Манипуляции с окном браузера (изменения размеров, прокрутка)
* Активация псевдоклассов (например `:hover`