Vodniki · 08

Zmogljivost in predvajanje

Kako se Animated izogne delu v vsaki sličici, kako preverite, katero pot uporablja element, in kako so bile izmerjene številke na domači strani.

Tri poti predvajanja

Animated izbere pot za vsako lastnost. API se s potjo ne spremeni.

Pot	Kdaj	Delo na sličico
browser	Končno gibanje transforma in opacityja na elementih `Animated.<tag>`, vključno z vzmetmi	Nič v JavaScriptu strani
css	Natančne krivulje, ki jih brskalnik lahko izrazi s skupnimi ključnimi sličicami CSS	Nič v JavaScriptu strani
js	Spremenljivke navadnega sloga, vnos, lastni izračuni in meje zaporedij	En zapis na vrednost, brez upodabljanja Reacta

Ena vrednost, veliko elementov

Izpeljave vrednosti hooka so izrazi calc(). S scope en zapis spremenljivke na sličico upravlja vse elemente v vsebniku.

Pripravljanje primera …

JavaScript je izklopljen. Koda spodaj je celoten primer.

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

Preverite pot

inspect(element) med pravim izvajanjem vrne driver in razlog za nadomestno pot za vsako animirano lastnost.

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

Začne se od prve sličice

Ko opravilo, ki zažene gibanje, zaposli glavno nit, na primer hidracija ali velik commit, se gibanje po koncu tega dela začne znova, namesto da bi bilo videti že napredovano. Zagon na skriti strani se konča v ozadju.

Kako so bile izmerjene številke na domači strani

Vsak scenarij je tekel na sveži strani po enem ogrevanju, s tremi zabeleženimi vzorci; poročana je mediana. Čas JavaScripta je čas v callbackih sličic animacije med gibanjem. Ne vključuje sloga, postavitve in izrisa, ki jih brskalnik opravi pri vsakem pristopu, zato ni merilo skupne obremenitve CPU ali števila sličic.

Predvajanje v brskalniku ne naredi postavitve, izrisa, sestavljanja ali pomnilnika brezplačnih. Izmerite pravi zaslon na napravah, ki jih podpirate.

Scenarij	Nastavitev	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