Guider · 03
Ytelse
Hva nettkomponentene koster, målt på dette bygget, og hvordan du gjenskaper tallene.
Målinger
Målt 2026-09-28 med Chrome 153.0.8010.52 (headless, Playwright). Hvert nettlesertall er det høyeste av tre kjøringer.
| Hva | Slik måles det | Resultat |
|---|---|---|
| Pakkestørrelse | Hele inngangspunktet for web (alle 16 eksporter) bundlet og minifisert med esbuild, React eksternt, gzip nivå 9 | 28.0 KB (84.3 KB minifisert) |
| Én komponent | Bare MotionNumber importert, samme bundling | 18.6 KB |
| JS-bilde-callbacks | Kall til requestAnimationFrame på siden i 1,2 s mens MotionNumber, MotionHeight og MotionHighlight endres sammen (12 animasjoner kjører) | 0 |
| React-commits per endring | Profiler-commits rundt MotionNumber for 10 verdiendringer, hver kjørt ferdig | 10 for 10 endringer |
| Strømming | Profiler-commits mens MotionStream viser 3000 tegn som kom på én gang (omtrent 4081 ms) | 11 |
| Avbrudd | 200 nye verdier med 5 ms mellomrom, så en pause: animasjoner igjen på siden, og om sluttteksten er nøyaktig | 0 igjen, nøyaktig tekst |
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
Derfor er det raskt
Fire designvalg holder kostnaden lav.
- Ikke noe animasjonsbibliotek på nettet: bevegelsen overleveres til nettleserens Web Animations API, med analytisk samplede fjærer.
- Ingen React-rendering per bilde: komponentene renderes når dataene dine endres, ikke mens de beveger seg.
- Strømmet tekst legges direkte til siden og føres inn i React-state bare noen få ganger i sekundet.
- Hver komponent står alene: det finnes ingen provider som renderer treet på nytt, og ingen global store.
Begrensninger
MotionStream bruker en animation frame-løkke mens den viser tekst; den er den eneste komponenten som trenger arbeid i hvert bilde. I React Native kjører bredde- og høydeendringer på JS-driver fordi de er layout. Målingene beskriver én maskin og én nettleser, så tallene dine vil være annerledes.
Gjenskap
Tallene kommer fra et skript i nettstedets repository. Det bundler pakken, åpner den installerte Chrome uten vindu, kjører hvert scenario tre ganger og skriver resultatene som denne siden leser.
node scripts/measure-chorus.mjs