Gidsen · 08

Prestaties en afspelen

Hoe Animated werk per frame vermijdt, hoe je controleert welk pad een element gebruikt, en hoe de getallen op de homepage zijn gemeten.

Drie afspeelpaden

Animated kiest per eigenschap een pad. De API verandert niet met het pad.

Pad	Wanneer	Werk per frame
browser	Eindige transform- en opacity-beweging op `Animated.<tag>`-elementen, veren inbegrepen	Geen in de JavaScript van de pagina
css	Exacte curves die de browser kan uitdrukken met gedeelde CSS-keyframes	Geen in de JavaScript van de pagina
js	Gewone style-variabelen, invoer, eigen berekeningen en sequentiegrenzen	Eén schrijfactie per waarde, geen React-render

Eén waarde, veel elementen

Afleidingen van een hookwaarde zijn calc()-expressies. Met scope stuurt één variabele-schrijfactie per frame elk element in de container aan.

Voorbeeld voorbereiden…

JavaScript staat uit. De code hieronder is het volledige voorbeeld.

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

Controleer het pad

inspect(element) geeft de driver en de fallback-reden voor elke geanimeerde eigenschap tijdens een echte run.

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

Begint bij het eerste frame

Als de taak die een beweging start de main thread bezet houdt, zoals hydration of een grote commit, begint de beweging opnieuw zodra dat werk klaar is in plaats van al gevorderd te verschijnen. Een start op een verborgen pagina maakt zich op de achtergrond af.

Hoe de getallen op de homepage zijn gemeten

Elk scenario draaide op een verse pagina na één opwarmronde, met drie vastgelegde samples, waarvan de mediaan wordt gerapporteerd. JavaScript-tijd is de tijd binnen animation frame-callbacks terwijl de beweging loopt. Style, layout en paint vallen erbuiten, die doet de browser bij elke aanpak, dus het is geen maat voor totale CPU of framerate.

Afspelen in de browser maakt layout, paint, compositing en geheugen niet gratis. Meet het echte scherm op de apparaten die je ondersteunt.

Scenario	Opzet	Resultaat
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