Kılavuzlar · 03
Performans
Web bileşenlerinin bu sürümde ölçülen maliyeti ve sayıların nasıl yeniden üretileceği.
Ölçümler
2026-09-28 tarihinde Chrome 153.0.8010.52 (headless, Playwright) ile ölçüldü. Her tarayıcı rakamı üç çalıştırmanın en büyüğüdür.
| Ne | Nasıl ölçülür | Sonuç |
|---|---|---|
| Paket boyutu | Web giriş noktasının tamamı (16 export'un hepsi) esbuild ile paketlenip küçültüldü, React harici, gzip düzey 9 | 28.0 KB (84.3 KB küçültülmüş) |
| Tek bileşen | Yalnızca MotionNumber import edildi, aynı paketleme | 18.6 KB |
| JS kare callback'leri | MotionNumber, MotionHeight ve MotionHighlight birlikte değişirken 1,2 s boyunca sayfadaki requestAnimationFrame çağrıları (12 animasyon çalışıyor) | 0 |
| Değişiklik başına React commit'leri | 10 değer değişikliği için MotionNumber çevresindeki Profiler commit'leri, her biri bitmeye bırakıldı | 10 değişiklik için 10 |
| Akış | MotionStream aynı anda gelen 3000 karakteri gösterirken Profiler commit'leri (yaklaşık 4081 ms) | 11 |
| Kesintiler | 5 ms arayla 200 yeni değer, ardından bir duraklama: sayfada kalan animasyonlar ve son metnin tam doğru olup olmadığı | 0 kaldı, tam doğru metin |
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
Neden hızlı
Dört tasarım kararı maliyeti düşük tutar.
- Web'de animasyon kütüphanesi yok: hareket, yayları analitik örneklenerek tarayıcının Web Animations API'sine devredilir.
- Kare başına React render'ı yok: bileşenler hareket ederken değil, verileriniz değiştiğinde render edilir.
- Akan metin doğrudan sayfaya eklenir ve React durumuna saniyede yalnızca birkaç kez katılır.
- Her bileşen kendi başına durur: ağacı yeniden render eden bir provider ya da genel bir store yoktur.
Sınırlar
MotionStream metni gösterirken bir animation frame döngüsü kullanır; her karede iş gerektiren tek bileşen odur. React Native'de genişlik ve yükseklik değişiklikleri düzen olduğu için JS driver üzerinde çalışır. Ölçümler tek bir makineyi ve tek bir tarayıcıyı anlatır; sizin sayılarınız farklı olacaktır.
Yeniden üretin
Rakamlar web sitesi deposundaki bir betikten gelir. Betik paketi paketler, kurulu Chrome'u penceresiz açar, her senaryoyu üç kez çalıştırır ve bu sayfanın okuduğu sonuçları yazar.
node scripts/measure-chorus.mjs