Oppaat · 03
Suorituskyky
Mitä web-komponentit maksavat tällä julkaisulla mitattuna ja miten luvut toistetaan.
Mittaukset
Mitattu 2026-09-28 käyttäen Chrome 153.0.8010.52 (headless, Playwright). Jokainen selainluku on suurin kolmesta ajosta.
| Mitä | Miten mitataan | Tulos |
|---|---|---|
| Paketin koko | Koko webin aloituspiste (kaikki 16 exportia) paketoituna ja pienennettynä esbuildilla, React ulkoisena, gzip-taso 9 | 28.0 KB (84.3 KB pienennettynä) |
| Yksi komponentti | Vain MotionNumber importattu, sama paketointi | 18.6 KB |
| JS-ruutucallbackit | Sivun requestAnimationFrame-kutsut 1,2 s:n aikana, kun MotionNumber, MotionHeight ja MotionHighlight muuttuvat yhdessä (12 animaatiota käynnissä) | 0 |
| React-commitit muutosta kohden | Profiler-commitit MotionNumber-komponentin ympärillä 10 arvon muutokselle, kukin annettu päättyä | 10 / 10 muutosta |
| Virtaus | Profiler-commitit, kun MotionStream näyttää 3000 kerralla saapunutta merkkiä (noin 4081 ms) | 11 |
| Keskeytykset | 200 uutta arvoa 5 ms:n välein, sitten tauko: sivulle jääneet animaatiot ja onko lopputeksti tarkka | 0 jäljellä, tarkka teksti |
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
Miksi se on nopea
Neljä suunnitteluratkaisua pitää kustannuksen pienenä.
- Webissä ei animaatiokirjastoa: liike annetaan selaimen Web Animations API:lle analyyttisesti näytteistetyin jousin.
- Ei React-renderöintiä ruutua kohden: komponentit renderöityvät datasi muuttuessa, eivät liikkuessaan.
- Virtaava teksti lisätään suoraan sivulle ja yhdistetään Reactin tilaan vain muutaman kerran sekunnissa.
- Jokainen komponentti on itsenäinen: ei puuta uudelleen renderöivää provideria eikä globaalia storea.
Rajoitukset
MotionStream käyttää animation frame -silmukkaa tekstiä näyttäessään; se on ainoa komponentti, joka tarvitsee työtä joka ruudussa. React Nativessa leveyden ja korkeuden muutokset kulkevat JS-driverilla, koska ne ovat asettelua. Mittaukset kuvaavat yhtä konetta ja yhtä selainta, joten omat lukusi poikkeavat.
Toistaminen
Luvut tulevat sivuston repositorion skriptistä. Se paketoi paketin, avaa asennetun Chromen ilman ikkunaa, ajaa jokaisen skenaarion kolmesti ja kirjoittaa tulokset, jotka tämä sivu lukee.
node scripts/measure-chorus.mjs