Guides · 03
Performance
Was die Web-Komponenten kosten, gemessen an diesem Build, und wie du die Zahlen reproduzierst.
Messungen
Gemessen am 2026-09-28 mit Chrome 153.0.8010.52 (headless, Playwright). Jeder Browserwert ist der größte von drei Durchläufen.
| Was | Wie gemessen wird | Ergebnis |
|---|---|---|
| Paketgröße | Der gesamte Web-Einstiegspunkt (alle 16 Exporte), mit esbuild gebündelt und minifiziert, React extern, gzip-Stufe 9 | 28.0 KB (84.3 KB minifiziert) |
| Eine Komponente | Nur MotionNumber importiert, gleiches Bündeln | 18.6 KB |
| JS-Frame-Callbacks | Aufrufe von requestAnimationFrame auf der Seite während 1,2 s, in denen sich MotionNumber, MotionHeight und MotionHighlight gemeinsam ändern (12 Animationen laufen) | 0 |
| React-Commits pro Änderung | Profiler-Commits rund um MotionNumber für 10 Wertänderungen, jede bis zum Ende ausgeführt | 10 für 10 Änderungen |
| Streaming | Profiler-Commits, während MotionStream 3000 auf einmal eingetroffene Zeichen einblendet (etwa 4081 ms) | 11 |
| Unterbrechungen | 200 neue Werte im Abstand von 5 ms, dann eine Pause: auf der Seite verbliebene Animationen und ob der Endtext exakt ist | 0 übrig, exakter 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
Warum es schnell ist
Vier Designentscheidungen halten die Kosten niedrig.
- Keine Animationsbibliothek im Web: Bewegung wird an die Web Animations API des Browsers übergeben, mit analytisch abgetasteten Federn.
- Kein React-Render pro Frame: Komponenten rendern, wenn sich deine Daten ändern, nicht während sie sich bewegen.
- Gestreamter Text wird direkt an die Seite angehängt und nur ein paar Mal pro Sekunde in den React-State überführt.
- Jede Komponente steht für sich: kein Provider, der den Baum neu rendert, und kein globaler Store.
Grenzen
MotionStream nutzt eine Animation-Frame-Schleife, während es Text einblendet; es ist die einzige Komponente, die in jedem Frame Arbeit braucht. Unter React Native laufen Breiten- und Höhenänderungen auf dem JS-Treiber, weil sie Layout sind. Die Messungen beschreiben eine Maschine und einen Browser – deine Zahlen werden abweichen.
Reproduzieren
Die Zahlen stammen aus einem Skript im Website-Repository. Es bündelt das Paket, öffnet das installierte Chrome ohne Fenster, führt jedes Szenario dreimal aus und schreibt die Ergebnisse, die diese Seite liest.
node scripts/measure-chorus.mjs