Guide · 03
Prestazioni
Quanto costano i componenti web, misurato su questa build, e come riprodurre i numeri.
Misurazioni
Misurato il 2026-09-28 con Chrome 153.0.8010.52 (headless, Playwright). Ogni valore del browser è il più alto di tre esecuzioni.
| Che cosa | Come viene misurato | Risultato |
|---|---|---|
| Dimensione del pacchetto | L’intera entry web (tutti i 16 export) raccolta in bundle e minificata con esbuild, React esterno, gzip livello 9 | 28.0 KB (84.3 KB minificati) |
| Un solo componente | Solo MotionNumber importato, stesso bundling | 18.6 KB |
| Callback di frame JS | Chiamate a requestAnimationFrame nella pagina per 1,2 s mentre MotionNumber, MotionHeight e MotionHighlight cambiano insieme (12 animazioni in corso) | 0 |
| Commit di React per modifica | Commit del Profiler attorno a MotionNumber per 10 cambi di valore, ognuno lasciato terminare | 10 per 10 modifiche |
| Streaming | Commit del Profiler mentre MotionStream rivela 3000 caratteri arrivati tutti insieme (circa 4081 ms) | 11 |
| Interruzioni | 200 nuovi valori a 5 ms di distanza, poi una pausa: animazioni rimaste nella pagina e se il testo finale è esatto | 0 rimaste, testo esatto |
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
Perché è veloce
Quattro scelte di progettazione tengono basso il costo.
- Nessuna libreria di animazione sul web: il movimento è affidato alla Web Animations API del browser, con molle campionate in modo analitico.
- Nessun render di React a ogni frame: i componenti si renderizzano quando cambiano i tuoi dati, non mentre si muovono.
- Il testo in streaming viene aggiunto direttamente alla pagina e integrato nello stato di React solo poche volte al secondo.
- Ogni componente è indipendente: non c’è nessun provider che ri-renderizza l’albero e nessuno store globale.
Limiti
MotionStream usa un ciclo di animation frame mentre rivela il testo; è l’unico componente che lavora a ogni frame. Su React Native i cambi di larghezza e altezza girano sul driver JS perché sono layout. Le misurazioni descrivono una macchina e un browser, quindi i tuoi numeri saranno diversi.
Riproduci
I valori vengono da uno script nel repository del sito. Raccoglie il pacchetto in un bundle, apre il Chrome installato senza finestra, esegue ogni scenario tre volte e scrive i risultati che questa pagina legge.
node scripts/measure-chorus.mjs