Ghiduri · 03
Performanță
Cât costă componentele web, măsurat pe această versiune, și cum se reproduc cifrele.
Măsurători
Măsurat pe 2026-09-28 cu Chrome 153.0.8010.52 (headless, Playwright). Fiecare cifră de browser este cea mai mare din trei rulări.
| Ce | Cum se măsoară | Rezultat |
|---|---|---|
| Mărimea pachetului | Întregul punct de intrare web (toate cele 16 exporturi) împachetat și minimizat cu esbuild, React extern, gzip nivel 9 | 28.0 KB (84.3 KB minimizat) |
| O singură componentă | Doar MotionNumber importat, aceeași împachetare | 18.6 KB |
| Callback-uri de cadru JS | Apeluri requestAnimationFrame pe pagină timp de 1,2 s, cât MotionNumber, MotionHeight și MotionHighlight se schimbă împreună (12 animații în desfășurare) | 0 |
| Commit-uri React per schimbare | Commit-uri Profiler în jurul MotionNumber pentru 10 schimbări de valoare, fiecare lăsată să se încheie | 10 pentru 10 schimbări |
| Flux | Commit-uri Profiler cât MotionStream afișează 3000 caractere sosite deodată (circa 4081 ms) | 11 |
| Întreruperi | 200 valori noi la 5 ms una de alta, apoi o pauză: animațiile rămase pe pagină și dacă textul final este exact | 0 rămase, text exact |
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
De ce e rapid
Patru decizii de design țin costul scăzut.
- Nicio bibliotecă de animație pe web: mișcarea este predată Web Animations API-ului din browser, cu arcuri eșantionate analitic.
- Nicio randare React per cadru: componentele se randează când se schimbă datele, nu cât se mișcă.
- Textul în flux este adăugat direct în pagină și integrat în starea React doar de câteva ori pe secundă.
- Fiecare componentă stă singură: nu există provider care să re-randeze arborele și nici store global.
Limite
MotionStream folosește o buclă animation frame cât afișează textul; este singura componentă care are nevoie de muncă la fiecare cadru. În React Native, schimbările de lățime și înălțime rulează pe driverul JS, pentru că sunt layout. Măsurătorile descriu o singură mașină și un singur browser, așa că cifrele dumneavoastră vor diferi.
Reproducere
Cifrele provin dintr-un script din depozitul site-ului. Acesta împachetează pachetul, deschide Chrome-ul instalat fără fereastră, rulează fiecare scenariu de trei ori și scrie rezultatele pe care le citește această pagină.
node scripts/measure-chorus.mjs