Průvodci · 03
Výkon
Kolik webové komponenty stojí, změřeno na tomto sestavení, a jak čísla zopakovat.
Měření
Změřeno 2026-09-28 s Chrome 153.0.8010.52 (headless, Playwright). Každý údaj z prohlížeče je nejvyšší ze tří běhů.
| Co | Jak se měří | Výsledek |
|---|---|---|
| Velikost balíčku | Celý webový vstupní bod (všech 16 exportů) sbalený a minifikovaný přes esbuild, React externě, gzip úrovně 9 | 28.0 KB (84.3 KB minifikováno) |
| Jedna komponenta | Naimportován jen MotionNumber, stejné sbalení | 18.6 KB |
| Callbacky snímků JS | Volání requestAnimationFrame na stránce během 1,2 s, zatímco se MotionNumber, MotionHeight a MotionHighlight mění společně (běží 12 animací) | 0 |
| Commity Reactu na změnu | Commity Profiler kolem MotionNumber pro 10 změn hodnoty, každá ponechaná doběhnout | 10 na 10 změn |
| Streamování | Commity Profiler, zatímco MotionStream odhaluje 3000 znaků, které přišly najednou (zhruba 4081 ms) | 11 |
| Přerušení | 200 nových hodnot po 5 ms, pak pauza: animace, které na stránce zůstaly, a zda je konečný text přesný | Zbývá 0, přesný 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
Proč je to rychlé
Náklady drží nízko čtyři návrhová rozhodnutí.
- Žádná knihovna animací na webu: pohyb se předává Web Animations API prohlížeče s analyticky vzorkovanými pružinami.
- Žádný render Reactu v každém snímku: komponenty se renderují, když se změní vaše data, ne během pohybu.
- Streamovaný text se připojuje přímo do stránky a do stavu Reactu se promítá jen několikrát za sekundu.
- Každá komponenta stojí sama: neexistuje provider, který by překresloval strom, ani globální store.
Omezení
MotionStream během odhalování textu používá smyčku animation frame; je to jediná komponenta, která potřebuje práci v každém snímku. V React Native běží změny šířky a výšky na driveru JS, protože jde o rozvržení. Měření popisují jeden stroj a jeden prohlížeč, takže vaše čísla budou jiná.
Zopakování
Údaje pocházejí ze skriptu v repozitáři webu. Ten sbalí balíček, otevře nainstalovaný Chrome bez okna, každý scénář spustí třikrát a zapíše výsledky, které tato stránka čte.
node scripts/measure-chorus.mjs