Guides · 03
Ydeevne
Hvad webkomponenterne koster, målt på dette build, og hvordan du genskaber tallene.
Målinger
Målt 2026-09-28 med Chrome 153.0.8010.52 (headless, Playwright). Hvert browsertal er det største af tre kørsler.
| Hvad | Sådan måles det | Resultat |
|---|---|---|
| Pakkestørrelse | Hele webindgangspunktet (alle 16 exports) bundlet og minificeret med esbuild, React eksternt, gzip niveau 9 | 28.0 KB (84.3 KB minificeret) |
| Én komponent | Kun MotionNumber importeret, samme bundling | 18.6 KB |
| JS-frame-callbacks | Kald til requestAnimationFrame på siden i 1,2 s, mens MotionNumber, MotionHeight og MotionHighlight ændrer sig samtidig (12 animationer kører) | 0 |
| React-commits pr. ændring | Profiler-commits omkring MotionNumber for 10 værdiændringer, hver kørt færdig | 10 for 10 ændringer |
| Streaming | Profiler-commits, mens MotionStream viser 3000 tegn, der kom på én gang (cirka 4081 ms) | 11 |
| Afbrydelser | 200 nye værdier med 5 ms mellemrum, derefter en pause: animationer tilbage på siden, og om slutteksten er præcis | 0 tilbage, præcis 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 hurtigt
Fire designvalg holder omkostningen nede.
- Intet animationsbibliotek på nettet: bevægelsen overdrages til browserens Web Animations API med analytisk samplede fjedre.
- Ingen React-rendering pr. frame: komponenter renderes, når dine data ændrer sig, ikke mens de bevæger sig.
- Streamet tekst tilføjes direkte til siden og føres kun ind i React-state nogle få gange i sekundet.
- Hver komponent står alene: der er ingen provider, der renderer træet igen, og ingen global store.
Begrænsninger
MotionStream bruger en animation frame-løkke, mens den viser tekst; den er den eneste komponent, der kræver arbejde i hver frame. I React Native kører bredde- og højdeændringer på JS-driver, fordi de er layout. Målingerne beskriver én maskine og én browser, så dine tal vil være anderledes.
Genskab
Tallene kommer fra et script i sitets repository. Det bundler pakken, åbner den installerede Chrome uden vindue, kører hvert scenarie tre gange og skriver de resultater, som denne side læser.
node scripts/measure-chorus.mjs