Vadovai · 03
Našumas
Kiek kainuoja žiniatinklio komponentai, išmatuota šiame leidime, ir kaip atkurti skaičius.
Matavimai
Išmatuota 2026-09-28 su Chrome 153.0.8010.52 (headless, Playwright). Kiekvienas naršyklės skaičius yra didžiausias iš trijų paleidimų.
| Kas | Kaip matuojama | Rezultatas |
|---|---|---|
| Paketo dydis | Visas žiniatinklio įėjimo taškas (visi 16 eksportų), supakuotas ir sumažintas su esbuild, React išorinis, gzip 9 lygis | 28.0 KB (84.3 KB sumažinus) |
| Vienas komponentas | Importuotas tik MotionNumber, tas pats pakavimas | 18.6 KB |
| JS kadrų callback | requestAnimationFrame kvietimai puslapyje per 1,2 s, kol MotionNumber, MotionHeight ir MotionHighlight keičiasi kartu (veikia 12 animacijos) | 0 |
| React commit per pakeitimą | Profiler commit aplink MotionNumber per 10 reikšmės pakeitimus, kiekvienam leidžiant baigtis | 10 per 10 pakeitimus |
| Srautas | Profiler commit, kol MotionStream rodo 3000 iškart atėjusius simbolius (apie 4081 ms) | 11 |
| Pertraukimai | 200 naujos reikšmės kas 5 ms, tada pauzė: puslapyje likusios animacijos ir ar galutinis tekstas tikslus | Liko 0, tikslus tekstas |
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
Kodėl tai greita
Keturi dizaino sprendimai išlaiko mažą kainą.
- Žiniatinklyje jokios animacijos bibliotekos: judesys perduodamas naršyklės Web Animations API, spyruoklės imamos analitiškai.
- Jokio React perpiešimo per kadrą: komponentai perpiešiami, kai pasikeičia jūsų duomenys, o ne judant.
- Srautinis tekstas pridedamas tiesiai į puslapį ir į React būseną įtraukiamas tik kelis kartus per sekundę.
- Kiekvienas komponentas savarankiškas: nėra provider, kuris perpieštų medį, ir nėra globalaus store.
Apribojimai
MotionStream rodydamas tekstą naudoja animation frame ciklą; tai vienintelis komponentas, kuriam reikia darbo kiekviename kadre. React Native pločio ir aukščio pokyčiai vykdomi su JS driver, nes tai išdėstymas. Matavimai apibūdina vieną kompiuterį ir vieną naršyklę, todėl jūsų skaičiai skirsis.
Atkūrimas
Skaičiai gaunami iš svetainės saugyklos scenarijaus. Jis supakuoja paketą, atidaro įdiegtą Chrome be lango, kiekvieną scenarijų paleidžia tris kartus ir įrašo rezultatus, kuriuos skaito šis puslapis.
node scripts/measure-chorus.mjs