Sprievodcovia · 03
Výkon
Koľko webové komponenty stoja, namerané na tomto zostavení, a ako čísla zopakovať.
Merania
Namerané 2026-09-28 s Chrome 153.0.8010.52 (headless, Playwright). Každý údaj z prehliadača je najvyšší z troch behov.
| Čo | Ako sa meria | Výsledok |
|---|---|---|
| Veľkosť balíka | Celý webový vstupný bod (všetkých 16 exportov) zbalený a minifikovaný cez esbuild, React externe, gzip úrovne 9 | 28.0 KB (84.3 KB minifikované) |
| Jeden komponent | Naimportovaný len MotionNumber, rovnaké zbalenie | 18.6 KB |
| Callbacky snímok JS | Volania requestAnimationFrame na stránke počas 1,2 s, kým sa MotionNumber, MotionHeight a MotionHighlight menia spolu (beží 12 animácií) | 0 |
| Commity Reactu na zmenu | Commity Profiler okolo MotionNumber pre 10 zmien hodnoty, každá ponechaná dobehnúť | 10 na 10 zmien |
| Streamovanie | Commity Profiler, kým MotionStream odhaľuje 3000 znakov, ktoré prišli naraz (zhruba 4081 ms) | 11 |
| Prerušenia | 200 nových hodnôt po 5 ms, potom pauza: animácie, ktoré na stránke zostali, a či je konečný text presný | Zostáva 0, presný text |
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
Prečo je to rýchle
Náklady držia nízko štyri návrhové rozhodnutia.
- Žiadna knižnica animácií na webe: pohyb sa odovzdáva Web Animations API prehliadača s analyticky vzorkovanými pružinami.
- Žiadny render Reactu v každej snímke: komponenty sa renderujú, keď sa zmenia vaše údaje, nie počas pohybu.
- Streamovaný text sa pripája priamo do stránky a do stavu Reactu sa premieta len niekoľkokrát za sekundu.
- Každý komponent stojí sám: neexistuje provider, ktorý by prekresľoval strom, ani globálny store.
Obmedzenia
MotionStream počas odhaľovania textu používa slučku animation frame; je to jediný komponent, ktorý potrebuje prácu v každej snímke. V React Native bežia zmeny šírky a výšky na driveri JS, pretože ide o rozloženie. Merania opisujú jeden stroj a jeden prehliadač, takže vaše čísla budú iné.
Zopakovanie
Údaje pochádzajú zo skriptu v repozitári webu. Ten zbalí balík, otvorí nainštalovaný Chrome bez okna, každý scenár spustí trikrát a zapíše výsledky, ktoré táto stránka číta.
node scripts/measure-chorus.mjs