ตัวนับ FPS

FPS ปัจจุบัน
วินาที
เฟรม
FPS
ถัดไป

ใช้ตัวนับ FPS นี้เพื่อวัดว่าเบราว์เซอร์เรนเดอร์หน้าปัจจุบันได้ลื่นแค่ไหน เครื่องมือจะสุ่มเก็บตัวอย่างเฟรมด้วย requestAnimationFrame แล้วรายงาน FPS ปัจจุบัน ค่าเฉลี่ย ค่าต่ำสุด และค่าสูงสุด อีกทั้งยังวาดกราฟสั้น ๆ ให้คุณเห็นช่วงที่ค่าตกจากแท็บหนัก แอนิเมชัน ส่วนขยาย การลดสมรรถนะ หรือการตั้งค่าจอภาพ

วิธีวัด FPS ของเบราว์เซอร์

  1. 1

    เลือกระยะเวลาเก็บตัวอย่าง

    ห้าวินาทีเป็นค่าเริ่มต้นที่เหมาะสม หากต้องการจับอาการกระตุกเป็นช่วง ๆ หรือภาระงานเบื้องหลังที่เปลี่ยนไป ให้ใช้ระยะเวลาที่ยาวขึ้น

  2. 2

    ตั้งค่าการปรับให้เรียบและเกณฑ์เตือน

    หน้าต่างการปรับให้เรียบจะเฉลี่ยเฟรมล่าสุด ส่วนเกณฑ์จะกำหนดระดับ FPS ที่คุณยอมรับได้บนอุปกรณ์ที่กำลังทดสอบ

  3. 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 ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

ตารางอ้างอิงแป้นพิมพ์ลัด

ค้นหาแป้นพิมพ์ลัดเริ่มต้นตามเอกสารของ VS Code, Chrome และ Bash ที่ใช้ GNU Readline บน macOS, Windows และ Linux

ตัวตรวจสอบอีเมล

ตรวจสอบที่อยู่อีเมล: ตรวจไวยากรณ์ RFC 5322 ค้นหา MX เรกคอร์ดแบบเรียลไทม์ พร้อมรายละเอียดส่วนท้องถิ่น โดเมน และความยาว ไม่มีการส่งอีเมลใด ๆ

เครื่องสร้างตัวอักษรสุ่ม

สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน

เครื่องมือสร้าง EditorConfig

สร้างไฟล์ .editorconfig ด้วยกฎสไตล์และขนาดการเยื้อง การจบบรรทัด ชุดอักขระ และช่องว่างของคุณ เพื่อให้การจัดรูปแบบสอดคล้องกันในทุก IDE และโปรแกรมแก้ไข

เครื่องมือนี้มีให้บริการในภาษาอื่น