Oppaat · 08

Suorituskyky ja toisto

Miten Animated välttää työn joka ruudussa, miten tarkistat elementin käyttämän polun ja miten etusivun luvut mitattiin.

Kolme toistopolkua

Animated valitsee polun ominaisuuskohtaisesti. API ei muutu polun mukana.

Polku	Milloin	Työ ruutua kohden
browser	Äärellinen transform- ja opacity-liike `Animated.<tag>`-elementeissä, jouset mukaan lukien	Ei mitään sivun JavaScriptissä
css	Tarkat käyrät, jotka selain voi ilmaista jaetuilla CSS-avainruuduilla	Ei mitään sivun JavaScriptissä
js	Tavallisen tyylin muuttujat, syöte, omat laskelmat ja sekvenssien rajat	Yksi kirjoitus arvoa kohden, ei React-renderöintiä

Yksi arvo, monta elementtiä

Hookin arvon johdannaiset ovat calc()-lausekkeita. scope-asetuksella yksi muuttujan kirjoitus ruutua kohden ohjaa jokaista säiliön elementtiä.

Valmistellaan esimerkkiä…

JavaScript on pois päältä. Alla oleva koodi on koko esimerkki.

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

Tarkista polku

inspect(element) palauttaa jokaisen animoidun ominaisuuden driverin ja varapolun syyn todellisen ajon aikana.

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

Alkaa ensimmäisestä ruudusta

Kun liikkeen käynnistävä tehtävä pitää pääsäikeen kiireisenä, kuten hydraatio tai suuri commit, liike käynnistyy uudelleen tuon työn päätyttyä sen sijaan, että näyttäisi jo edenneeltä. Piilotetulla sivulla käynnistetty liike päättyy taustalla.

Miten etusivun luvut mitattiin

Jokainen skenaario ajettiin uudella sivulla yhden lämmittelyn jälkeen kolmella tallennetulla näytteellä, ja raportoitu arvo on mediaani. JavaScript-aika on aika, joka kuluu animation-frame-callbackeissa liikkeen aikana. Siihen eivät kuulu tyyli, asettelu ja piirto, jotka selain tekee jokaisessa lähestymistavassa, joten se ei mittaa kokonais-CPU:ta tai ruudunpäivitysnopeutta.

Selaintoisto ei tee asettelusta, piirrosta, koostamisesta tai muistista ilmaista. Mittaa todellinen näkymä tukemillasi laitteilla.

Skenaario	Kokoonpano	Tulos
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