Guides · 03
Performance
Ce que coûtent les composants web, mesuré sur ce build, et comment reproduire les chiffres.
Mesures
Mesuré le 2026-09-28 avec Chrome 153.0.8010.52 (headless, Playwright). Chaque chiffre navigateur est le plus élevé de trois exécutions.
| Quoi | Méthode de mesure | Résultat |
|---|---|---|
| Taille du paquet | Tout le point d’entrée web (les 16 exports) empaqueté et minifié avec esbuild, React en externe, gzip niveau 9 | 28.0 KB (84.3 KB minifié) |
| Un seul composant | Seul MotionNumber est importé, même empaquetage | 18.6 KB |
| Callbacks d’image JS | Appels à requestAnimationFrame sur la page pendant 1,2 s pendant que MotionNumber, MotionHeight et MotionHighlight changent ensemble (12 animations en cours) | 0 |
| Commits React par changement | Commits de Profiler autour de MotionNumber pour 10 changements de valeur, chacun laissé aller à son terme | 10 pour 10 changements |
| Streaming | Commits de Profiler pendant que MotionStream révèle 3000 caractères arrivés d’un coup (environ 4081 ms) | 11 |
| Interruptions | 200 nouvelles valeurs à 5 ms d’intervalle, puis une pause : animations restant sur la page et exactitude du texte final | 0 restantes, texte exact |
2026-09-28 · @kkwaenggwari/animated-chorus@0.1.0 · Chrome 153.0.8010.52 (headless, Playwright) · Windows_NT 10.0.22631 · Intel(R) Core(TM) i7-14700K
Pourquoi c’est rapide
Quatre choix de conception maintiennent le coût bas.
- Aucune bibliothèque d’animation sur le web : le mouvement est confié à la Web Animations API du navigateur, avec des ressorts échantillonnés analytiquement.
- Aucun rendu React à chaque image : les composants se rendent quand vos données changent, pas pendant qu’ils bougent.
- Le texte en streaming est ajouté directement à la page et n’est intégré à l’état React que quelques fois par seconde.
- Chaque composant fonctionne seul : aucun provider qui re-rend l’arbre et aucun store global.
Limites
MotionStream utilise une boucle d’animation frame pendant qu’il révèle du texte ; c’est le seul composant qui a besoin de travailler à chaque image. Sur React Native, les changements de largeur et de hauteur passent par le driver JS car ils relèvent de la mise en page. Les mesures décrivent une machine et un navigateur : vos chiffres seront différents.
Reproduire
Les chiffres proviennent d’un script du dépôt du site. Il empaquette le paquet, ouvre le Chrome installé sans fenêtre, exécute chaque scénario trois fois et écrit les résultats que lit cette page.
node scripts/measure-chorus.mjs