Útmutatók · 03
Teljesítmény
Mennyibe kerülnek a webes komponensek erre a kiadásra mérve, és hogyan reprodukálhatók a számok.
Mérések
Mérve: 2026-09-28, Chrome 153.0.8010.52 (headless, Playwright). Minden böngészős adat három futás legnagyobb értéke.
| Mit | Hogyan mérjük | Eredmény |
|---|---|---|
| Csomagméret | A teljes webes belépési pont (mind a 16 export) esbuilddel csomagolva és minifikálva, a React külső, gzip 9-es szint | 28.0 KB (84.3 KB minifikálva) |
| Egy komponens | Csak a MotionNumber importálva, ugyanazzal a csomagolással | 18.6 KB |
| JS-képkocka-callbackek | requestAnimationFrame hívások az oldalon 1,2 s alatt, miközben a MotionNumber, a MotionHeight és a MotionHighlight együtt változik (12 animáció fut) | 0 |
| React-commitok változásonként | Profiler-commitok a MotionNumber körül 10 értékváltozásnál, mindegyiket végigfuttatva | 10 / 10 változás |
| Folyamatos megjelenítés | Profiler-commitok, miközben a MotionStream megjelenít 3000 egyszerre érkezett karaktert (kb. 4081 ms) | 11 |
| Megszakítások | 200 új érték 5 ms-onként, majd szünet: az oldalon maradt animációk, és hogy pontos-e a végső szöveg | 0 maradt, pontos szöveg |
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
Miért gyors
Négy tervezési döntés tartja alacsonyan a költséget.
- Weben nincs animációs könyvtár: a mozgást a böngésző Web Animations API-ja kapja meg, analitikusan mintavételezett rugókkal.
- Nincs képkockánkénti React-renderelés: a komponensek akkor renderelnek, amikor az adatai változnak, nem mozgás közben.
- A folyamatos szöveg közvetlenül az oldalhoz fűződik, és másodpercenként csak néhányszor olvad bele a React-állapotba.
- Minden komponens önálló: nincs a fát újrarenderelő provider és nincs globális store.
Korlátok
A MotionStream szövegmegjelenítés közben animation frame ciklust használ; ez az egyetlen komponens, amely minden képkockában munkát igényel. React Native alatt a szélesség- és magasságváltozások JS-driveren futnak, mert elrendezésről van szó. A mérések egyetlen gépet és egyetlen böngészőt írnak le, így az Ön számai eltérnek majd.
Reprodukálás
Az adatok a webhely tárolójában lévő szkriptből származnak. Ez becsomagolja a csomagot, ablak nélkül megnyitja a telepített Chrome-ot, minden forgatókönyvet háromszor lefuttat, és megírja az eredményeket, amelyeket ez az oldal olvas.
node scripts/measure-chorus.mjs