Panduan · 03
Performa
Biaya komponen web, diukur pada build ini, dan cara mereproduksi angkanya.
Pengukuran
Diukur pada 2026-09-28 dengan Chrome 153.0.8010.52 (headless, Playwright). Setiap angka browser adalah yang terbesar dari tiga kali eksekusi.
| Apa | Cara mengukurnya | Hasil |
|---|---|---|
| Ukuran paket | Seluruh entri web (16 ekspor) dibundel dan diminifikasi dengan esbuild, React eksternal, gzip level 9 | 28.0 KB (84.3 KB terminifikasi) |
| Satu komponen | Hanya MotionNumber yang diimpor, bundling yang sama | 18.6 KB |
| Callback frame JS | Panggilan requestAnimationFrame di halaman selama 1,2 s saat MotionNumber, MotionHeight, dan MotionHighlight berubah bersamaan (12 animasi berjalan) | 0 |
| Commit React per perubahan | Commit Profiler di sekitar MotionNumber untuk 10 perubahan nilai, masing-masing dibiarkan selesai | 10 untuk 10 perubahan |
| Streaming | Commit Profiler saat MotionStream menampilkan 3000 karakter yang tiba sekaligus (sekitar 4081 ms) | 11 |
| Interupsi | 200 nilai baru berjarak 5 ms, lalu jeda: animasi yang tersisa di halaman dan apakah teks akhirnya tepat | Tersisa 0, teks tepat |
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
Mengapa cepat
Empat keputusan desain menjaga biaya tetap rendah.
- Tidak ada pustaka animasi di web: gerak diserahkan ke Web Animations API milik browser, dengan pegas yang disampel secara analitis.
- Tidak ada render React per frame: komponen dirender saat data Anda berubah, bukan saat bergerak.
- Teks mengalir ditambahkan langsung ke halaman dan dilebur ke state React hanya beberapa kali per detik.
- Setiap komponen berdiri sendiri: tidak ada provider yang merender ulang pohon dan tidak ada store global.
Batasan
MotionStream memakai loop animation frame selama menampilkan teks; ini satu-satunya komponen yang butuh kerja di setiap frame. Di React Native, perubahan lebar dan tinggi berjalan dengan driver JS karena merupakan tata letak. Pengukuran menggambarkan satu mesin dan satu browser, jadi angka Anda akan berbeda.
Reproduksi
Angka-angka ini berasal dari skrip di repositori situs web. Skrip itu membundel paket, membuka Chrome yang terinstal tanpa jendela, menjalankan setiap skenario tiga kali, dan menulis hasil yang dibaca halaman ini.
node scripts/measure-chorus.mjs