BD animation-performance

Удерживайте веб-анимации в пределах бюджета кадра — анимируйте только составные свойства, держите анимацию вне основного потока, когда страница загружена, и находите причину, когда анимация пропускает кадры. Охватывает конвейер компоновки/рисования/компоновки, более дешевые замены свойств, CSS против WAAPI против requestAnimationFrame, аппаратное ускорение Framer Motion, повторный рендеринг React за кадр, пересчет унаследованных переменных CSS, стоимость размытия и когда `will-change` действительно помогает. Используйте, когда анимация работает прерывисто, дергается, заикается или пропускает кадры; при выборе свойства для анимации; при выборе между CSS и JS анимацией по соображениям производительности; или когда вы обращаетесь к `will-change` или GPU слоям. Для выбора сглаживания, длительности или анимации вообще используйте animate; для обзора анимации в целом используйте review-animations.

машинный переводПоказать оригиналСкрыть оригинал«Keep web animations inside the frame budget — animate composite-only p…»

Keep web animations inside the frame budget — animate composite-only properties, keep motion off the main thread when the page is busy, and find the cause when an animation drops frames. Covers the layout/paint/composite pipeline, cheaper property swaps, CSS vs WAAPI vs requestAnimationFrame, Framer Motion's hardware-accelerated path, React re-rendering per frame, inherited CSS variable recalculation, blur cost, and when `will-change` actually helps. Use when an animation is janky, choppy, stutters, or drops frames; when choosing which property to animate; when deciding between CSS and JS animation on performance grounds; or when reaching for `will-change` or GPU layers. For choosing easing, duration, or whether to animate at all use animate; for reviewing motion as a whole use review-animations.

Удерживайте веб-анимации в пределах бюджета кадра — анимируйте только составные свойства, держите анимацию вне основного потока, когда страница загружена, и…

Как процесс D 43/100 · Процесс не доведён — слабые места: результат и критерий готовности, когда включается, входы и предусловия