Guider · 08

Ytelse og avspilling

Hvordan Animated unngår arbeid i hvert bilde, hvordan du sjekker hvilken vei et element bruker, og hvordan tallene på forsiden ble målt.

Tre avspillingsveier

Animated velger en vei per egenskap. API-et endres ikke med veien.

Vei	Når	Arbeid per bilde
browser	Endelig transform- og opacity-bevegelse på `Animated.<tag>`-elementer, fjærer inkludert	Ingenting i sidens JavaScript
css	Eksakte kurver nettleseren kan uttrykke med delte CSS-keyframes	Ingenting i sidens JavaScript
js	Vanlige style-variabler, inndata, egne beregninger og sekvensgrenser	Én skriving per verdi, ingen React-rendering

Én verdi, mange elementer

Avledninger av en hook-verdi er calc()-uttrykk. Med scope styrer én variabelskriving per bilde alle elementene i containeren.

Forbereder eksempelet …

JavaScript er slått av. Koden nedenfor er hele eksempelet.

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

Sjekk veien

inspect(element) returnerer driveren og fallback-årsaken for hver animerte egenskap under en ekte kjøring.

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

Starter fra første bilde

Når oppgaven som starter en bevegelse holder hovedtråden opptatt, som hydrering eller en stor commit, starter bevegelsen på nytt når det arbeidet er ferdig, i stedet for å se allerede påbegynt ut. En start på en skjult side fullføres i bakgrunnen.

Slik ble tallene på forsiden målt

Hvert scenario kjørte på en ny side etter én oppvarming, med tre registrerte målinger, og medianen oppgis. JavaScript-tid er tiden i animation frame-callbacks mens bevegelsen pågår. Den utelater style, layout og paint, som nettleseren gjør med alle tilnærminger, så den er ikke et mål på samlet CPU eller bildefrekvens.

Avspilling i nettleseren gjør ikke layout, paint, compositing eller minne gratis. Mål den ekte skjermen på enhetene du støtter.

Scenario	Oppsett	Resultat
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