Ghiduri · 08

Performanță și redare

Cum evită Animated munca la fiecare cadru, cum verificați ce cale folosește un element și cum au fost măsurate cifrele de pe pagina principală.

Trei căi de redare

Animated alege o cale per proprietate. API-ul nu se schimbă în funcție de cale.

Cale	Când	Muncă per cadru
browser	Mișcare finită de transform și opacity pe elemente `Animated.<tag>`, inclusiv arcuri	Nimic în JavaScript-ul paginii
css	Curbe exacte pe care browserul le poate exprima cu keyframe-uri CSS comune	Nimic în JavaScript-ul paginii
js	Variabile de stil obișnuite, intrare, calcul propriu și limitele secvențelor	O scriere per valoare, fără randare React

O valoare, multe elemente

Derivatele unei valori de hook sunt expresii calc(). Cu scope, o singură scriere de variabilă per cadru conduce fiecare element din container.

Se pregătește exemplul…

JavaScript este dezactivat. Codul de mai jos este exemplul complet.

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

Verificați calea

inspect(element) returnează driverul și motivul căii de rezervă pentru fiecare proprietate animată în timpul unei rulări reale.

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

Pornește de la primul cadru

Când sarcina care pornește o mișcare ține ocupat firul principal, cum ar fi hidratarea sau un commit mare, mișcarea repornește după ce se încheie acea muncă, în loc să pară deja avansată. O pornire pe o pagină ascunsă se încheie în fundal.

Cum au fost măsurate cifrele de pe pagina principală

Fiecare scenariu a rulat pe o pagină nouă după o încălzire, cu trei eșantioane înregistrate, raportând mediana. Timpul JavaScript este timpul petrecut în callback-urile animation-frame cât rulează mișcarea. Nu include stilul, layoutul și desenarea, pe care browserul le face pentru orice abordare, deci nu este o măsură a CPU total sau a ratei de cadre.

Redarea în browser nu face gratuite layoutul, desenarea, compunerea sau memoria. Măsurați ecranul real pe dispozitivele pe care le suportați.

Scenariu	Configurare	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