Как уменьшить количество DOM reflow
Во вчерашнем посте было упоминание про Layout Thrashing — избыточный перерасчёт положения и геометрии элементов на странице (reflow), ведущий к сильному проседанию fps страницы. Неделю назад Карис Теудулу написал статью про подходы решения этой проблемы — "Web Performance: Minimising DOM Reflow / Layout Shift".
DOM reflow происходит во многих ситуациях: вставка/удаление элементов в DOM, модификация контента, сдвиг элементов, измерение элементов (например, с помощью offsetHeight, getBoundingClientRect ), динамичное изменение CSS и т.д. Основная рекомендация — по мере возможности уменьшать количество таких событий. Это можно сделать с помощью батчинга DOM-операций, редактирования элементов на более нижних уровнях дерева, использования flexbox вместо float для раскладки элементов на странице и т.п.
Хорошая статья. Рекомендую почитать всем, кому интересна тема оптимизации рендеринга в браузере.
https://medium.com/better-programming/web-performance-dom-reflow-76ac7c4d2d4f