Gidsen · 03
Prestaties
Wat de webcomponenten kosten, gemeten op deze build, en hoe je de getallen reproduceert.
Metingen
Gemeten op 2026-09-28 met Chrome 153.0.8010.52 (headless, Playwright). Elk browsercijfer is het hoogste van drie runs.
| Wat | Hoe het wordt gemeten | Resultaat |
|---|---|---|
| Pakketgrootte | Het hele webingangspunt (alle 16 exports) gebundeld en geminificeerd met esbuild, React extern, gzip niveau 9 | 28.0 KB (84.3 KB geminificeerd) |
| Eén component | Alleen MotionNumber geïmporteerd, zelfde bundeling | 18.6 KB |
| JS-frame-callbacks | Aanroepen van requestAnimationFrame op de pagina gedurende 1,2 s terwijl MotionNumber, MotionHeight en MotionHighlight samen veranderen (12 animaties actief) | 0 |
| React-commits per wijziging | Profiler-commits rond MotionNumber voor 10 waardewijzigingen, elk afgewacht | 10 voor 10 wijzigingen |
| Streamen | Profiler-commits terwijl MotionStream 3000 tekens onthult die in één keer binnenkwamen (ongeveer 4081 ms) | 11 |
| Onderbrekingen | 200 nieuwe waarden met 5 ms ertussen, dan een pauze: animaties die op de pagina overbleven en of de eindtekst exact is | 0 over, exacte tekst |
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
Waarom het snel is
Vier ontwerpkeuzes houden de kosten laag.
- Geen animatielibrary op het web: beweging wordt overgedragen aan de Web Animations API van de browser, met analytisch bemonsterde veren.
- Geen React-render per frame: componenten renderen als je data verandert, niet terwijl ze bewegen.
- Gestreamde tekst wordt direct aan de pagina toegevoegd en maar een paar keer per seconde in React-state verwerkt.
- Elk component staat op zichzelf: er is geen provider die de boom opnieuw rendert en geen globale store.
Beperkingen
MotionStream gebruikt een animation frame-lus terwijl het tekst onthult; het is het enige component dat elk frame werk nodig heeft. In React Native lopen breedte- en hoogtewijzigingen op de JS-driver omdat ze layout zijn. De metingen beschrijven één machine en één browser, dus jouw getallen zullen verschillen.
Reproduceren
De cijfers komen uit een script in de repository van de website. Het bundelt het pakket, opent de geïnstalleerde Chrome zonder venster, draait elk scenario drie keer en schrijft de resultaten die deze pagina leest.
node scripts/measure-chorus.mjs