TL;DR
Что вызывает перерасчет стиля в Chrome и что можно сделать, чтобы сократить время на этот шаг?
Фон
В приложении с большим количеством элементов (переменных, например, 10 000) я наблюдаю, как Пересчет стиля занимает много времени, при добавлении класса к родительскому элементу этих элементов. Существуют селекторы, которые будут влиять на элементы каждого поддерева, когда контейнер имеет этот класс.
В инструментах разработчика я смог отследить причину события Recalculate Style, щелкнув здесь (скриншот MCVE):
Исходя из названия, я предполагаю, что этот шаг включает в себя вычисление эффективного (конечного) стиля элемента. Я думаю, это происходит, когда
- измененный стиль элемента,
измененный (псевдо) класс
- of the element itself or
- родительского или родственного элемента, связанного селектором или
измененный селектор CSS (импорт нового CSS, создание
<style>)
заставляет браузер пересчитывать атрибуты CSS элемента.
Попытка доказать мой тезис
Я создал MCVE с тем же количеством элементов, что и в статическом HTML, и переключил класс .change на .container с помощью обработчика click в документе — предельно простой код.
MCVE работает намного лучше, чем реальное приложение, шаг Пересчитать стиль занимает меньше времени. Вероятно, это связано с более простым деревом и меньшим количеством стилей.
Затем я начал добавлять больше стилей ко всем селекторам, и среднее время увеличивалось с каждой новой кучей новых атрибутов CSS. Добавление дополнительных элементов к 10 000 поддеревьев не изменило среднее время.
Итак, я бы сказал, что на этот раз влияет количество атрибутов CSS, количество затронутых селекторов и количество затронутых элементов.
