คู่มือ · 03
ประสิทธิภาพ
ต้นทุนของคอมโพเนนต์บนเว็บที่วัดบนบิลด์นี้ และวิธีทำตัวเลขซ้ำ
การวัด
วัดเมื่อ 2026-09-28 ด้วย Chrome 153.0.8010.52 (headless, Playwright) ตัวเลขของเบราว์เซอร์แต่ละค่าคือค่าสูงสุดจากการรันสามครั้ง
| อะไร | วัดอย่างไร | ผลลัพธ์ |
|---|---|---|
| ขนาดแพ็กเกจ | จุดเริ่มต้นสำหรับเว็บทั้งหมด (export ทั้ง 16 ตัว) รวมและย่อขนาดด้วย esbuild ไม่รวม React gzip ระดับ 9 | 28.0 KB (84.3 KB หลังย่อขนาด) |
| คอมโพเนนต์เดียว | import เฉพาะ MotionNumber รวมแบบเดียวกัน | 18.6 KB |
| callback ของเฟรม JS | จำนวนการเรียก requestAnimationFrame บนหน้าใน 1.2 s ขณะที่ MotionNumber, MotionHeight และ MotionHighlight เปลี่ยนพร้อมกัน (แอนิเมชันทำงาน 12 ตัว) | 0 |
| React commit ต่อการเปลี่ยนแปลง | commit ของ Profiler รอบ MotionNumber สำหรับการเปลี่ยนค่า 10 ครั้ง แต่ละครั้งปล่อยให้จบ | 10 สำหรับ 10 การเปลี่ยนแปลง |
| การสตรีม | commit ของ Profiler ขณะที่ MotionStream แสดง 3000 ตัวอักษรที่มาถึงพร้อมกัน (ประมาณ 4081 ms) | 11 |
| การขัดจังหวะ | ค่าใหม่ 200 ค่าห่างกัน 5 ms แล้วหยุด: แอนิเมชันที่เหลือบนหน้า และข้อความสุดท้ายถูกต้องแม่นยำหรือไม่ | เหลือ 0 ตัว ข้อความถูกต้องแม่นยำ |
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
ทำไมจึงเร็ว
การตัดสินใจด้านการออกแบบสี่ข้อทำให้ต้นทุนต่ำ
- ไม่มีไลบรารีแอนิเมชันบนเว็บ: การเคลื่อนไหวส่งให้ Web Animations API ของเบราว์เซอร์ โดยสปริงสุ่มตัวอย่างเชิงวิเคราะห์
- ไม่มีการเรนเดอร์ React ต่อเฟรม: คอมโพเนนต์เรนเดอร์เมื่อข้อมูลของคุณเปลี่ยน ไม่ใช่ขณะที่เคลื่อนที่
- ข้อความสตรีมต่อท้ายลงหน้าโดยตรงและรวมเข้า state ของ React เพียงไม่กี่ครั้งต่อวินาที
- ทุกคอมโพเนนต์แยกเป็นอิสระ: ไม่มี provider ที่เรนเดอร์ทรีใหม่ และไม่มี store ส่วนกลาง
ข้อจำกัด
MotionStream ใช้ลูป animation frame ขณะแสดงข้อความ เป็นคอมโพเนนต์เดียวที่ต้องทำงานทุกเฟรม บน React Native การเปลี่ยนความกว้างและความสูงทำงานด้วย JS driver เพราะเป็นเลย์เอาต์ การวัดอธิบายเครื่องเดียวและเบราว์เซอร์เดียว ตัวเลขของคุณจึงจะต่างออกไป
ทำซ้ำ
ตัวเลขมาจากสคริปต์ในรีโพซิทอรีของเว็บไซต์ สคริปต์จะรวมแพ็กเกจ เปิด Chrome ที่ติดตั้งไว้โดยไม่มีหน้าต่าง รันแต่ละสถานการณ์สามครั้ง และเขียนผลลัพธ์ที่หน้านี้อ่าน
node scripts/measure-chorus.mjs