Guides · 08

Performance und Wiedergabe

Wie Animated Arbeit pro Frame vermeidet, wie du prüfst, welchen Weg ein Element nimmt, und wie die Zahlen auf der Startseite gemessen wurden.

Drei Wiedergabewege

Animated wählt pro Eigenschaft einen Weg. Die API ändert sich mit dem Weg nicht.

Weg	Wann	Arbeit pro Frame
browser	Endliche transform- und opacity-Bewegung auf `Animated.<tag>`-Elementen, Federn eingeschlossen	Keine im JavaScript der Seite
css	Exakte Kurven, die der Browser mit geteilten CSS-Keyframes ausdrücken kann	Keine im JavaScript der Seite
js	Normale style-Variablen, Eingaben, eigene Berechnungen und sequence-Grenzen	Ein Schreibvorgang pro Wert, kein React-Render

Ein Wert, viele Elemente

Ableitungen eines Hook-Werts sind calc()-Ausdrücke. Mit scope treibt ein Variablen-Schreibvorgang pro Frame jedes Element im Container an.

Beispiel wird vorbereitet…

JavaScript ist aus. Der Code unten ist das vollständige Beispiel.

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

Den Weg prüfen

inspect(element) gibt während eines echten Durchlaufs für jede animierte Eigenschaft den Driver und den Fallback-Grund zurück.

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

Startet ab dem ersten Frame

Hält die Aufgabe, die eine Bewegung startet, den Main-Thread beschäftigt – etwa die Hydration oder ein großer Commit –, startet die Bewegung neu, sobald diese Arbeit endet, statt bereits fortgeschritten zu erscheinen. Ein Start auf einer ausgeblendeten Seite wird im Hintergrund fertig.

So wurden die Zahlen der Startseite gemessen

Jedes Szenario lief in einer frischen Seite nach einem Warm-up, mit drei aufgezeichneten Messungen; angegeben ist der Median. Die JavaScript-Zeit ist die Zeit in Animation-Frame-Callbacks, während die Bewegung läuft. Style, Layout und Paint sind nicht enthalten, weil der Browser sie bei jedem Ansatz erledigt – es ist also kein Maß für die gesamte CPU-Last oder die Bildrate.

Browser-Wiedergabe macht Layout, Paint, Compositing und Speicher nicht kostenlos. Miss den echten Bildschirm auf den Geräten, die du unterstützt.

Szenario	Aufbau	Ergebnis
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