Hướng dẫn · 03
Hiệu năng
Chi phí của các component web, đo trên bản build này, và cách tái tạo các con số.
Số đo
Đo ngày 2026-09-28 bằng Chrome 153.0.8010.52 (headless, Playwright). Mỗi con số trình duyệt là giá trị lớn nhất trong ba lần chạy.
| Cái gì | Cách đo | Kết quả |
|---|---|---|
| Kích thước gói | Toàn bộ điểm vào web (cả 16 export) được đóng gói và thu gọn bằng esbuild, React để ngoài, gzip mức 9 | 28.0 KB (84.3 KB đã thu gọn) |
| Một component | Chỉ import MotionNumber, cùng cách đóng gói | 18.6 KB |
| Callback khung hình JS | Số lần gọi requestAnimationFrame trên trang trong 1,2 s khi MotionNumber, MotionHeight và MotionHighlight thay đổi cùng lúc (12 hoạt ảnh đang chạy) | 0 |
| Commit React cho mỗi thay đổi | Commit của Profiler quanh MotionNumber cho 10 lần đổi giá trị, mỗi lần được chạy xong | 10 cho 10 thay đổi |
| Truyền dần | Commit của Profiler khi MotionStream hiển thị 3000 ký tự đến cùng lúc (khoảng 4081 ms) | 11 |
| Ngắt giữa chừng | 200 giá trị mới cách nhau 5 ms, rồi tạm dừng: số hoạt ảnh còn lại trên trang và văn bản cuối có chính xác không | Còn 0, văn bản chính xác |
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
Vì sao nhanh
Bốn quyết định thiết kế giữ chi phí ở mức thấp.
- Không có thư viện hoạt ảnh trên web: chuyển động được giao cho Web Animations API của trình duyệt, với lò xo được lấy mẫu giải tích.
- Không render React mỗi khung hình: component render khi dữ liệu của bạn đổi, không phải khi đang chuyển động.
- Văn bản truyền dần được nối thẳng vào trang và chỉ gộp vào state React vài lần mỗi giây.
- Mỗi component đứng độc lập: không có provider nào render lại cây và không có store toàn cục.
Giới hạn
MotionStream dùng vòng lặp animation frame trong lúc hiển thị văn bản; đây là component duy nhất cần làm việc ở mỗi khung hình. Trên React Native, thay đổi chiều rộng và chiều cao chạy bằng JS driver vì chúng là bố cục. Số đo mô tả một máy và một trình duyệt, nên con số của bạn sẽ khác.
Tái tạo
Các con số đến từ một script trong kho mã của trang web. Script đóng gói thư viện, mở Chrome đã cài mà không có cửa sổ, chạy mỗi kịch bản ba lần và ghi kết quả mà trang này đọc.
node scripts/measure-chorus.mjs