Как оптимизировать изменения в DOM для снижения затрат ресурсов

Что проверяют

Понимаете ли вы, что дорого стоит не само изменение DOM, а пересчёт стилей, раскладка и отрисовка, которые оно запускает. Следом обычно просят объяснить layout thrashing на примере и показать, как найти проблему в DevTools.

Как отвечать

Начните с конвейера браузера: стили, layout, paint, composite. Чем раньше в цепочке срабатывает изменение, тем оно дороже. Дальше приёмы:

• чтения отдельно от записей: offsetHeight, getBoundingClientRect() и getComputedStyle после изменений заставляют браузер пересчитать раскладку немедленно. Чередование чтения и записи в цикле даёт forced reflow на каждой итерации. Сначала прочитайте всё, потом запишите, записи удобно собрать в requestAnimationFrame;
• пакетная вставка: DocumentFragment, append(...nodes) или replaceChildren вместо тысячи appendChild в живое дерево;
• классы вместо стилей: classList.toggle вместо нескольких присваиваний element.style;
• анимация через transform и opacity: их обрабатывает композитор без раскладки, а top, left, width запускают layout на каждом кадре. will-change ставьте точечно, каждый слой ест память;
• меньше узлов: виртуализация длинных списков через TanStack Virtual или react-window, content-visibility: auto для блоков вне экрана, contain для изоляции поддерева;
• меньше рендеров во фреймворке: в React это memo, стабильные ключи, состояние ниже по дереву.

Проверяется всё во вкладке Performance в Chrome DevTools: длинные задачи, фиолетовые блоки Layout и предупреждения о forced reflow.

Где спотыкаются

Говорят, что виртуальный DOM быстрее прямой работы с DOM. Он избавляет от ручного отслеживания изменений, но точечная правка одного узла руками всегда дешевле диффа плюс та же правка.

Пишут innerHTML += в цикле. Браузер каждый раз разбирает всю разметку заново, существующие узлы теряют обработчики, а с пользовательскими данными это ещё и XSS.

Выдают делегирование событий за оптимизацию изменений DOM. Оно экономит память на обработчиках, но число пересчётов раскладки не меняет.