Vodiči · 03
Performanse
Koliko web komponente koštaju, izmjereno na ovoj izgradnji, i kako ponoviti brojeve.
Mjerenja
Izmjereno 2026-09-28 s Chrome 153.0.8010.52 (headless, Playwright). Svaki podatak preglednika najveći je od tri izvođenja.
| Što | Kako se mjeri | Rezultat |
|---|---|---|
| Veličina paketa | Cijela ulazna točka za web (svih 16 exporta) spakirana i minificirana s esbuild, React vanjski, gzip razina 9 | 28.0 KB (84.3 KB minificirano) |
| Jedna komponenta | Uvezen samo MotionNumber, isto pakiranje | 18.6 KB |
| JS callbackovi kadrova | Pozivi requestAnimationFrame na stranici tijekom 1,2 s dok se MotionNumber, MotionHeight i MotionHighlight mijenjaju zajedno (12 animacija u tijeku) | 0 |
| Reactovi commitovi po promjeni | Commitovi Profiler oko MotionNumber za 10 promjena vrijednosti, svaka ostavljena da završi | 10 za 10 promjena |
| Streaming | Commitovi Profiler dok MotionStream otkriva 3000 znakova koji su stigli odjednom (oko 4081 ms) | 11 |
| Prekidi | 200 novih vrijednosti u razmaku od 5 ms, zatim stanka: animacije preostale na stranici i je li završni tekst točan | Preostalo 0, točan 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
Zašto je brzo
Četiri projektne odluke drže trošak niskim.
- Nema biblioteke animacija na webu: pokret se predaje pregledniku preko Web Animations API-ja, s analitički uzorkovanim oprugama.
- Nema Reactova renderiranja u svakom kadru: komponente se renderiraju kad se vaši podaci promijene, a ne dok se kreću.
- Tekst iz streama izravno se dodaje stranici i u Reactovo stanje prenosi samo nekoliko puta u sekundi.
- Svaka komponenta stoji sama: nema providera koji ponovno renderira stablo ni globalnog storea.
Ograničenja
MotionStream koristi petlju animation framea dok otkriva tekst; to je jedina komponenta kojoj treba posao u svakom kadru. U React Nativeu promjene širine i visine idu na JS driveru jer su raspored. Mjerenja opisuju jedno računalo i jedan preglednik, pa će vaši brojevi biti drukčiji.
Ponavljanje
Brojevi dolaze iz skripte u repozitoriju stranice. Ona pakira paket, otvara instalirani Chrome bez prozora, svaki scenarij pokreće tri puta i zapisuje rezultate koje ova stranica čita.
node scripts/measure-chorus.mjs