Хочу оставить здесь две ссылки, которые регулярно приходится искать:
https://gist.github.com/paulirish/5d52fb081b3570c81e3a
https://csstriggers.com/
Они про оптимизацию скорости отрисовки страницы в браузере при изменении разных свойств элементов в JS и CSS.
Каждый раз, когда что-то меняется в коде, браузер делает операции reflow (перестроение дерева DOM элементов) и repaint (изменение внешнего вида элементов). Иногда эти операции могут быть очень тяжёлыми и могут очень сильно замедлить отрисовку.
Например, вычисление
element.offsetWidth в цикле может иногда привести к заметным зависаниям. А изменение свойств transform или opacity работает обычно быстрее, чем абсолютное позиционирование, потому что не влияет на элементы вокруг и использует аппаратное ускорение.Если подробнее, то вот это хороший курс на тему, который я когда-то сама смотрела:
https://www.udacity.com/course/browser-rendering-optimization--ud860
#практика #оптимизация