Vodniki · 03
Zmogljivost
Koliko stanejo spletne komponente, izmerjeno na tej izdaji, in kako številke ponovite.
Meritve
Izmerjeno 2026-09-28 z Chrome 153.0.8010.52 (headless, Playwright). Vsaka številka za brskalnik je največja od treh izvajanj.
| Kaj | Kako se meri | Rezultat |
|---|---|---|
| Velikost paketa | Celotna spletna vstopna točka (vseh 16 izvozov), združena in pomanjšana z esbuild, React zunanji, gzip stopnje 9 | 28.0 KB (84.3 KB pomanjšano) |
| Ena komponenta | Uvožen le MotionNumber, enako združevanje | 18.6 KB |
| Callbacki sličic JS | Klici requestAnimationFrame na strani v 1,2 s, medtem ko se MotionNumber, MotionHeight in MotionHighlight spreminjajo skupaj (teče 12 animacij) | 0 |
| Commiti Reacta na spremembo | Commiti Profiler okoli MotionNumber za 10 sprememb vrednosti, vsaka prepuščena do konca | 10 za 10 sprememb |
| Pretakanje | Commiti Profiler, medtem ko MotionStream prikaže 3000 znakov, ki so prispeli naenkrat (približno 4081 ms) | 11 |
| Prekinitve | 200 novih vrednosti v razmiku 5 ms, nato premor: animacije, ki ostanejo na strani, in ali je končno besedilo natančno | Ostane 0, natančno besedilo |
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
Zakaj je hitro
Štiri odločitve pri zasnovi ohranjajo nizke stroške.
- Na spletu ni knjižnice za animacije: gibanje se preda Web Animations API brskalnika, vzmeti pa so vzorčene analitično.
- Ni upodabljanja Reacta na sličico: komponente se upodobijo, ko se spremenijo vaši podatki, ne pa med premikanjem.
- Pretočno besedilo se doda neposredno na stran in se v stanje Reacta vključi le nekajkrat na sekundo.
- Vsaka komponenta stoji sama: ni providerja, ki bi znova upodabljal drevo, in ni globalnega storea.
Omejitve
MotionStream med prikazovanjem besedila uporablja zanko sličic animacije; je edina komponenta, ki potrebuje delo v vsaki sličici. V React Nativu spremembe širine in višine tečejo z driverjem JS, ker gre za postavitev. Meritve opisujejo en računalnik in en brskalnik, zato bodo vaše številke drugačne.
Ponovitev
Številke izhajajo iz skripta v repozitoriju spletnega mesta. Združi paket, odpre nameščeni Chrome brez okna, vsak scenarij zažene trikrat in zapiše rezultate, ki jih bere ta stran.
node scripts/measure-chorus.mjs