Guides · 08

Performance et lecture

Comment Animated évite le travail à chaque image, comment vérifier le chemin qu’emprunte un élément, et comment les chiffres de l’accueil ont été mesurés.

Trois chemins de lecture

Animated choisit un chemin par propriété. L’API ne change pas selon le chemin.

Chemin	Quand	Travail par image
browser	Mouvements finis de transform et opacity sur les éléments `Animated.<tag>`, ressorts compris	Aucun dans le JavaScript de la page
css	Courbes exactes que le navigateur peut exprimer avec des keyframes CSS partagées	Aucun dans le JavaScript de la page
js	Variables de style ordinaires, entrées, calculs personnalisés et limites de sequence	Une écriture par valeur, aucun rendu React

Une valeur, de nombreux éléments

Les dérivations d’une valeur de hook sont des expressions calc(). Avec scope, une écriture de variable par image anime tous les éléments du conteneur.

Préparation de l’exemple…

JavaScript est désactivé. Le code ci-dessous est l’exemple 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;
}

Vérifier le chemin

inspect(element) renvoie le driver et la raison du repli pour chaque propriété animée, pendant une exécution réelle.

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

Démarre dès la première image

Quand la tâche qui lance un mouvement occupe le thread principal, comme l’hydratation ou un gros commit, le mouvement redémarre une fois ce travail terminé au lieu d’apparaître déjà avancé. Un démarrage sur une page masquée se termine en arrière-plan.

Comment les chiffres de l’accueil ont été mesurés

Chaque scénario a été exécuté dans une page neuve après un échauffement, avec trois échantillons enregistrés, dont on rapporte la médiane. Le temps JavaScript est le temps passé dans les callbacks d’animation frame pendant le mouvement. Il exclut le style, la mise en page et le rendu, que le navigateur effectue quelle que soit l’approche : ce n’est donc pas une mesure du CPU total ni de la fréquence d’images.

La lecture par le navigateur ne rend pas gratuits la mise en page, le rendu, la composition ni la mémoire. Mesurez l’écran réel sur les appareils que vous prenez en charge.

Scénario	Configuration	Résultat
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