Vodiči · 08

Performanse i reprodukcija

Kako Animated izbjegava posao u svakom kadru, kako provjeriti koji put element koristi i kako su izmjereni brojevi na početnoj stranici.

Tri puta reprodukcije

Animated bira put za svako svojstvo. API se ne mijenja s putem.

Put	Kada	Posao po kadru
browser	Konačni pokret transforma i opacityja na elementima `Animated.<tag>`, uključujući opruge	Nikakav u JavaScriptu stranice
css	Točne krivulje koje preglednik može izraziti dijeljenim CSS keyframes	Nikakav u JavaScriptu stranice
js	Obične style varijable, unos, vlastiti izračuni i granice sekvenci	Jedan zapis po vrijednosti, bez Reactova renderiranja

Jedna vrijednost, mnogo elemenata

Izvedenice vrijednosti hooka su izrazi calc(). Sa scope jedan zapis varijable po kadru upravlja svim elementima u spremniku.

Priprema primjera…

JavaScript je isključen. Kod ispod je cijeli primjer.

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;
}

Provjera puta

inspect(element) vraća driver i razlog fallbacka za svako animirano svojstvo tijekom stvarnog izvođenja.

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

Počinje od prvog kadra

Kad zadatak koji pokreće pokret zauzme glavnu nit, primjerice hidratacija ili velik commit, pokret se ponovno pokreće nakon što taj posao završi umjesto da se pojavi već odmaknut. Pokretanje na skrivenoj stranici završava u pozadini.

Kako su izmjereni brojevi na početnoj stranici

Svaki scenarij pokrenut je na svježoj stranici nakon jednog zagrijavanja, s tri zabilježena uzorka, a navodi se medijan. Vrijeme JavaScripta je vrijeme provedeno u callbackovima animation framea dok pokret traje. Isključuje style, layout i paint, koje preglednik obavlja uz svaki pristup, pa nije mjera ukupnog CPU-a ni broja kadrova.

Reprodukcija u pregledniku ne čini layout, paint, compositing ni memoriju besplatnima. Mjerite stvarni zaslon na uređajima koje podržavate.

Scenarij	Postavka	Rezultat
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