Мониторинг производительности CSS-анимаций
Вирендра Сингх опубликовал статью про анализ производительности CSS-анимаций — "Performance monitoring in CSS animations".
Анимации могут быть причиной притормаживающего интерфейса. Это происходит тогда, когда браузеру необходимо перевычислять стили (Recalculate Style), создавать слой с элементами (Layout), рендерить его (Paint) и совмещать с другими слоями (Composite Layers) на каждый кадр анимации. Распространённый трюк для снижения количества операций — вынос анимаций на GPU. Chrome делает это автоматически, если анимируются свойства transform, opacity, filter.
В большом проекте найти источник проблемы может быть сложно, поэтому тут очень могут помочь Chrome Dev Tools. С их помощью можно проанализировать стек слоёв и посмотреть, какая работа выполнялась. В статье это всё разбирается на примере анимации движения объекта.
Статью стоит почитать, если хотите узнать немного больше про возможности Chrome Dev Tools.
https://medium.com/chegg/performance-monitoring-in-css-animations-f11a21d0054f