Где лучше размещать модификацию внешнего вида по условию(CSS+JS)?
Вопрос в том, какой рендеринг стилей выгоден браузеру и для скорости загрузки/раскадровки больше.
Сейчас:
когда пролистали 100px вешаем класс на body (scrolled) и хотим поменять внешний вид .header
и пишем стили, в итоге после компиляции:
.scrolled .header {...}
.scrolled .header .search__input{...}
и тд, если есть изменения и других объектов в хидере.
А если делать изменение отдельных элементов, улучшится ли быстродействие?
(при этом если элементов будет 20 - то и 20 обращений через js)
.header--scrolled {...}
.search__input--scrolled {...}
И как тогда работать с остальными элементами, типо .overlay. Обращаться не очень будет удобно.
Вопрос еще относительно медиазапросов. Снижает ли быстродействие переопределение размеров блоков от медиазапросов?
(субъективно)
1) Не изменится
2) Заходим с устройства подхватываются media условия и все рендерится так как должно быть, но если конечно мы будем вертеть шириной экрана заставляя браузер обновлять состояние, то думаю что снижает.
Я конечно же не замерял, просто мое субъективное, лучше посвятить время оптимизации графики и кучи асинхронных http запросов, этого на сайтах много и нагружает неплохо
Простой
Средний
