Guider · 03
Prestanda
Vad webbkomponenterna kostar, uppmätt på det här bygget, och hur du återskapar siffrorna.
Mätningar
Uppmätt 2026-09-28 med Chrome 153.0.8010.52 (headless, Playwright). Varje webbläsarsiffra är den högsta av tre körningar.
| Vad | Så mäts det | Resultat |
|---|---|---|
| Paketstorlek | Hela webbens startpunkt (alla 16 exporter) paketerad och minifierad med esbuild, React externt, gzip nivå 9 | 28.0 KB (84.3 KB minifierat) |
| En komponent | Bara MotionNumber importerad, samma paketering | 18.6 KB |
| JS-bildrute-callbacks | Anrop till requestAnimationFrame på sidan under 1,2 s medan MotionNumber, MotionHeight och MotionHighlight ändras tillsammans (12 animationer igång) | 0 |
| React-commits per ändring | Profiler-commits runt MotionNumber för 10 värdeändringar, var och en färdigspelad | 10 för 10 ändringar |
| Strömning | Profiler-commits medan MotionStream visar 3000 tecken som kom på en gång (ungefär 4081 ms) | 11 |
| Avbrott | 200 nya värden med 5 ms mellanrum, sedan en paus: animationer kvar på sidan och om sluttexten är exakt | 0 kvar, exakt 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
Därför är det snabbt
Fyra designval håller kostnaden nere.
- Inget animationsbibliotek på webben: rörelsen lämnas över till webbläsarens Web Animations API, med analytiskt samplade fjädrar.
- Ingen React-rendering per bildruta: komponenter renderas när din data ändras, inte medan de rör sig.
- Strömmad text läggs direkt till sidan och förs in i React-state bara några gånger per sekund.
- Varje komponent står för sig själv: det finns ingen provider som renderar om trädet och ingen global store.
Begränsningar
MotionStream använder en animation frame-loop medan den visar text; den är den enda komponenten som behöver arbete varje bildruta. I React Native körs bredd- och höjdändringar på JS-driver eftersom de är layout. Mätningarna beskriver en maskin och en webbläsare, så dina siffror kommer att skilja sig.
Återskapa
Siffrorna kommer från ett skript i webbplatsens repository. Det paketerar paketet, öppnar den installerade Chrome utan fönster, kör varje scenario tre gånger och skriver resultaten som den här sidan läser.
node scripts/measure-chorus.mjs