ตัวนับ FPS
ใช้ตัวนับ FPS นี้เพื่อวัดว่าเบราว์เซอร์เรนเดอร์หน้าปัจจุบันได้ลื่นแค่ไหน เครื่องมือจะสุ่มเก็บตัวอย่างเฟรมด้วย requestAnimationFrame แล้วรายงาน FPS ปัจจุบัน ค่าเฉลี่ย ค่าต่ำสุด และค่าสูงสุด อีกทั้งยังวาดกราฟสั้น ๆ ให้คุณเห็นช่วงที่ค่าตกจากแท็บหนัก แอนิเมชัน ส่วนขยาย การลดสมรรถนะ หรือการตั้งค่าจอภาพ
วิธีวัด FPS ของเบราว์เซอร์
-
1
เลือกระยะเวลาเก็บตัวอย่าง
ห้าวินาทีเป็นค่าเริ่มต้นที่เหมาะสม หากต้องการจับอาการกระตุกเป็นช่วง ๆ หรือภาระงานเบื้องหลังที่เปลี่ยนไป ให้ใช้ระยะเวลาที่ยาวขึ้น
-
2
ตั้งค่าการปรับให้เรียบและเกณฑ์เตือน
หน้าต่างการปรับให้เรียบจะเฉลี่ยเฟรมล่าสุด ส่วนเกณฑ์จะกำหนดระดับ FPS ที่คุณยอมรับได้บนอุปกรณ์ที่กำลังทดสอบ
-
3
เริ่มนับแล้วดูช่วงการกระจายของค่า
FPS ปัจจุบันบอกความเร็วในการเรนเดอร์ล่าสุด ส่วนค่าเฉลี่ย ค่าต่ำสุด และค่าสูงสุด บอกว่าการทดสอบลื่นสม่ำเสมอหรือมีช่วงที่ตกจนสังเกตเห็นได้
ตัวนับ FPS วัดอะไร
เครื่องมือนี้วัดจังหวะการเรนเดอร์ของเบราว์เซอร์ ไม่ใช่คะแนนเบนช์มาร์กของการ์ดจอ ทุกครั้งที่เบราว์เซอร์พร้อมวาดเฟรมถัดไป requestAnimationFrame จะเรียกตัวเก็บตัวอย่าง ระยะเวลาระหว่างการเรียกสองครั้งจะให้ค่าเฟรมเรตขณะนั้น:
FPS = 1000 / frame_time_in_ms
ค่า FPS ปัจจุบันที่แสดงคือค่าเฉลี่ยเคลื่อนที่ตลอดหน้าต่างการปรับให้เรียบ หน้าต่างขนาด 60 เฟรมเหมาะกับจอ 60 Hz ทั่วไป เพราะช่วยลดค่าพุ่งเพียงเฟรมเดียวโดยไม่กลบการตกที่ต่อเนื่อง หน้าต่างเล็กกว่าจะตอบสนองไวกว่า ส่วนหน้าต่างใหญ่กว่าจะดูนิ่งกว่า
ตัวอย่างการคำนวณ
สมมติว่าการเก็บตัวอย่างห้าวินาทีบันทึกช่วงเวลาระหว่างเฟรมแบบย่อไว้ดังนี้:
| ช่วงเวลาระหว่างเฟรม | FPS ขณะนั้น | บ่งบอกอะไร |
|---|---|---|
| 16.7 มิลลิวินาที | 59.9 FPS | การเรนเดอร์ทั่วไปที่ 60 Hz |
| 8.3 มิลลิวินาที | 120.5 FPS | การเรนเดอร์ทั่วไปที่ 120 Hz |
| 25.0 มิลลิวินาที | 40.0 FPS | ช้าจนสังเกตเห็นได้บนจอหลายรุ่น |
| 33.3 มิลลิวินาที | 30.0 FPS | ภาระงานหนักหรือถูกลดสมรรถนะ |
หากเกณฑ์เตือนของคุณคือ 50 FPS แล้วค่าเฉลี่ยเคลื่อนที่ที่วัดได้จบที่ 47 FPS ผลลัพธ์ก็ยังต่ำกว่าเป้าหมาย แม้บางเฟรมจะเร็วกว่าก็ตาม แต่ถ้าจบใกล้ 60 FPS โดยมีบางช่วงตกลงไปที่ 45 FPS ค่าเฉลี่ยถือว่าดี ทว่าค่าต่ำสุดกำลังบอกว่ามีอาการกระตุกที่ควรตรวจสอบ
การอ่านผลลัพธ์
| รูปแบบผลลัพธ์ | ความหมายที่เป็นไปได้ | สิ่งที่ควรตรวจต่อ |
|---|---|---|
| ค่าเฉลี่ยใกล้อัตรารีเฟรช ตกน้อยครั้ง | การเรนเดอร์อยู่ในเกณฑ์ดี | เปรียบเทียบกับเบราว์เซอร์อื่นเฉพาะเมื่อจำเป็น |
| ค่าเฉลี่ยดี แต่ค่าต่ำสุดต่ำกว่ามาก | กระตุกเป็นช่วง ๆ | ปิดแท็บที่กินทรัพยากรหรือตรวจสอบแอนิเมชัน |
| ค่าเฉลี่ยต่ำกว่าเกณฑ์ | ภาระการเรนเดอร์สูงต่อเนื่อง | ตรวจการใช้งาน CPU ส่วนขยาย และสคริปต์ในหน้าเว็บ |
| FPS ถูกจำกัดอยู่ราว 30 | โหมดประหยัดพลังงานหรือการลดสมรรถนะ | ตรวจโหมดแบตเตอรี่และการตั้งค่าจอภาพ |
FPS ในเบราว์เซอร์ขึ้นอยู่กับอัตรารีเฟรชของจอ ตัวประกอบภาพของระบบปฏิบัติการ โหมดแบตเตอรี่ การลดสมรรถนะจากความร้อน แท็บที่เปิดอยู่ และตัวหน้าเว็บเอง ให้ทดสอบในแท็บที่ไม่มีอะไรทำงานก่อน แล้วทดสอบซ้ำขณะที่หน้าเว็บหรือแอปที่คุณกำลังตรวจสอบทำงานอยู่
คำถามที่พบบ่อย
ไม่เหมือน ตัวนับนี้วัดว่าเบราว์เซอร์ได้รับการเรียกกลับของ requestAnimationFrame บ่อยเพียงใด เหมาะกับการตรวจแอนิเมชันบนเว็บและความลื่นไหลของหน้าเว็บ แต่ไม่ใช่การเบนช์มาร์ก GPU เต็มรูปแบบสำหรับเกมที่ติดตั้งในเครื่อง
เบราว์เซอร์ส่วนใหญ่จะซิงก์เฟรมของแอนิเมชันกับอัตรารีเฟรชของจอ จอ 60 Hz จึงมักรายงานราว 60 FPS ขณะที่จอ 120 Hz หรือ 144 Hz อาจรายงานค่าสูงกว่าได้เมื่อเบราว์เซอร์และระบบปฏิบัติการเปิดทาง
ใช้ 50 FPS สำหรับการตรวจความลื่นไหลตามปกติที่ 60 Hz ส่วนจอที่มีอัตรารีเฟรชสูง ให้ตั้งเกณฑ์ใกล้เคียงกับประสบการณ์ที่คุณคาดหวัง เช่น 90 FPS หรือ 120 FPS
ไม่มี การวัดทำงานในเบราว์เซอร์ของคุณโดยใช้ API จับเวลาในเครื่อง เครื่องมือนี้ไม่ส่งข้อมูลเฟรม ภาพหน้าจอ หรือรายละเอียดอุปกรณ์ไปยัง API ภายนอกใด ๆ
เครื่องมือที่เกี่ยวข้อง
เลขฐานสองเป็นฐานสิบ
แปลงเลขฐานสองเป็นฐานสิบได้ทันที แสดงการกระจายตามตำแหน่งเพื่อให้เห็นว่าแต่ละบิตมีส่วนอย่างไร
ตัวแปลง ASCII เป็นเลขฐานสอง
แปลงสตริง ASCII ใดก็ได้เป็นเลขฐานสอง อักขระทุกตัวกลายเป็นแปดบิต คั่นด้วยช่องว่าง พร้อมวางในการติดตามโปรโตคอลหรือการบ้าน
เครื่องมือสร้างสีแบบสุ่ม
สร้างสี HEX แบบสุ่ม 1 ถึง 50 สี พร้อมตัวอย่างสีสำหรับดูตัวอย่าง คัดลอก และนำไปใช้ใน CSS งานทดสอบ หรือการสำรวจพาเลตสี.
ตัวแปลง ASCII เป็น Hex
แปลงข้อความ ASCII เป็นค่า byte แบบ hexadecimal output ใช้ hex digits สองตัวต่อ character พร้อมสำหรับ memory dumps, packet traces หรือ firmware tables
ตัวแปลง BBCode เป็น HTML
แปลง BBCode (มาร์กอัปของเว็บบอร์ด) เป็น HTML ที่สะอาด รองรับแท็กจัดรูปแบบ รายการ quote, code, รูปภาพ ลิงก์ และตาราง
ตัวแปลงไบนารีเป็น ASCII
วางข้อมูลไบนารี (ไบต์ที่คั่นด้วยช่องว่าง หรือบิตสตรีมยาวๆ) แล้วรับข้อความ ASCII ที่แทนค่านั้น รองรับการเข้ารหัสแบบ 7 บิตและ 8 บิต