Ръководства · 08

Производителност и възпроизвеждане

Как Animated избягва работа на всеки кадър, как да проверите кой път използва елемент и как са измерени числата на началната страница.

Три пътя на възпроизвеждане

Animated избира път за всяко свойство. API не се променя според пътя.

Път	Кога	Работа на кадър
browser	Крайно движение на transform и opacity при елементите `Animated.<tag>`, включително пружини	Никаква в JavaScript на страницата
css	Точни криви, които браузърът може да изрази със споделени CSS keyframes	Никаква в JavaScript на страницата
js	Обикновени style променливи, вход, собствени изчисления и граници на последователности	Един запис на стойност, без рендер на React

Една стойност, много елементи

Производните на стойност на hook са изрази calc(). Със scope един запис на променлива на кадър управлява всички елементи в контейнера.

Подготовка на примера…

JavaScript е изключен. Кодът по-долу е пълният пример.

App.jsx

import { useRef } from 'react';
import { Easing, loop, timing, useAnimated } from '@kkwaenggwari/animated';
import './styles.css';

export default function App({ count = 1600, amplitude = 16, duration = 2400 }) {
  const field = useRef(null);
  const renders = useRef(0);
  renders.current += 1;

  // Written once per frame on the field; every dot derives from it in CSS.
  const wave = useAnimated(
    0,
    (value) => {
      loop(timing(value, { toValue: 1, duration, easing: Easing.linear }));
    },
    [duration],
    { scope: field },
  );

  const columns = Math.ceil(Math.sqrt(count * 2.8));
  const dots = Array.from({ length: count }, (_, index) => index);

  return (
    <div className="stage">
      <div className="meta">
        <span>{count.toLocaleString('en-US')} dots</span>
        <span>React renders: {renders.current}</span>
      </div>
      <div className="field" ref={field} style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
        {dots.map((index) => {
          const phase = (index % columns) / columns + Math.floor(index / columns) / 18;
          return (
            <i
              key={index}
              style={{
                transform: `translateY(calc(sin((${wave} + ${phase}) * 1turn) * ${amplitude}px))`,
                opacity: `calc(0.55 + cos((${wave} + ${phase}) * 1turn) * 0.45)`,
              }}
            />
          );
        })}
      </div>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 16px;
  padding: 24px;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font:
    600 14px/1.4 ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  color: #1a33c7;
}

.field {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 2px;
  height: 280px;
  padding: 28px 16px;
  border-radius: 16px;
  background: #0b1440;
  overflow: hidden;
}

.field i {
  display: block;
  width: 100%;
  max-width: 8px;
  aspect-ratio: 1;
  align-self: center;
  justify-self: center;
  border-radius: 50%;
  background: #5c7cff;
}

.field i:nth-child(3n) {
  background: #8fb0ff;
}

.field i:nth-child(7n) {
  background: #ffffff;
}

Проверка на пътя

inspect(element) връща драйвера и причината за fallback за всяко анимирано свойство по време на реално изпълнение.

debug.js

import { inspect } from '@kkwaenggwari/animated';

console.table(inspect(element));
// property   driver     reason
// transform  browser    null
// opacity    css        null
// --level    js         css-variable-requires-js

Започва от първия кадър

Когато задачата, която стартира движение, държи главната нишка заета, например хидратация или голям commit, движението започва отначало след края на тази работа, вместо да се появи вече напреднало. Стартиране на скрита страница завършва във фонов режим.

Как са измерени числата на началната страница

Всеки сценарий е изпълнен на нова страница след едно загряване, с три записани проби; отчита се медианата. Времето на JavaScript е времето в callback-ите на animation frame, докато трае движението. То изключва style, layout и paint, които браузърът изпълнява при всеки подход, така че не е мярка за общото натоварване на CPU или честотата на кадрите.

Възпроизвеждането в браузъра не прави layout, paint, compositing или паметта безплатни. Измервайте истинския екран на устройствата, които поддържате.

Сценарий	Настройка	Резултат
400 Animated.div elements move translateX and fade in (timing, 1800 ms)	seed/pose/tempo on Animated.div; 800 browser animations	0.00 ms
One useAnimated value drives 10,000 elements in ordinary style (loop, 1200 ms)	transform and opacity as calc() of one CSS variable written on a scope element	0.13 ms

2026-09-28 · Chrome 153.0.8010.52 (headless) · Windows_NT x64 · Intel(R) Core(TM) i7-14700K