🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
Как браузер рисует кадры и где теряется плавность
Экран с частотой 60 Гц обновляется каждые 16,66 мс. С учётом работы браузера нужно уложиться в 10 мс: иначе частота кадров падает, а движение начинает дёргаться.
В разборе web.dev путь визуального изменения разделён на расчёт стилей и геометрии, отрисовку пикселей и сборку слоёв. Свойства width, height, left и top заставляют браузер пройти все эти этапы. Для цвета, фонового изображения или тени пересчёт геометрии не нужен. Если свойство не требует и новой отрисовки, браузер сразу собирает готовые слои.
Если анимация дёргается, проверьте в DevTools, какие этапы запускают её CSS-свойства. Начните с тех, что меняют размеры и положение: сокращение лишней работы освобождает время внутри кадра.