ใช้เครื่องมือตรวจสอบประสิทธิภาพเพื่อให้ทราบข้อมูลคร่าวๆ เกี่ยวกับประสิทธิภาพการโหลดและรันไทม์ของเว็บไซต์ได้อย่างรวดเร็ว
ภาพรวม
แผงเครื่องมือตรวจสอบประสิทธิภาพจะแสดงไทม์ไลน์ที่แสดงกราฟเมตริกประสิทธิภาพแบบเรียลไทม์ คลิกเมตริกเพื่อแสดงหรือซ่อน จากนั้นดูว่ากราฟเปลี่ยนแปลงไปอย่างไรเมื่อคุณโต้ตอบกับแอป
เครื่องมือตรวจสอบประสิทธิภาพจะติดตามเมตริกต่อไปนี้
- การใช้งาน CPU
- ขนาดฮีปของ JavaScript
- จํานวนโหนด DOM, Listener เหตุการณ์ JavaScript, เอกสาร และเฟรมทั้งหมดในหน้า
- การคำนวณเลย์เอาต์และรูปแบบซ้ำต่อวินาที
เปิดแผงเครื่องมือตรวจสอบประสิทธิภาพ
วิธีเปิดแผงเครื่องมือตรวจสอบประสิทธิภาพ
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- เปิดเมนูคำสั่งโดยกดแป้นต่อไปนี้
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
- เริ่มพิมพ์
Performance monitorเลือกแสดงเครื่องมือตรวจสอบประสิทธิภาพ แล้วกด Enter เครื่องมือสําหรับนักพัฒนาเว็บจะแสดงแผงเครื่องมือตรวจสอบประสิทธิภาพที่ด้านล่างของหน้าต่างเครื่องมือสําหรับนักพัฒนาเว็บ
หรือที่มุมขวาบน ให้เลือก ตัวเลือกเพิ่มเติม > เครื่องมือเพิ่มเติม > เครื่องมือตรวจสอบประสิทธิภาพ
ใช้แผงเครื่องมือตรวจสอบประสิทธิภาพ
เครื่องมือตรวจสอบประสิทธิภาพจะให้ภาพรวมคร่าวๆ เกี่ยวกับประสิทธิภาพรันไทม์ของเว็บไซต์
การสังเกตการเปลี่ยนแปลงของค่าเมตริกขณะที่คุณโต้ตอบกับเว็บไซต์อาจเผยให้เห็นโอกาสในการปรับปรุง
ฟีเจอร์ที่มีประโยชน์ของเครื่องมือตรวจสอบประสิทธิภาพคือจะทำงานตลอดการไปยังส่วนต่างๆ ของหน้า ดังนั้น ในฐานะนักพัฒนาซอฟต์แวร์ฝั่งหน้า คุณจึงหลีกเลี่ยงปัญหาต่างๆ เช่น การรีเฟรชเลย์เอาต์ได้โดยเปิดเครื่องมือตรวจสอบประสิทธิภาพ เลื่อนดูเว็บไซต์ และคอยดูเมตริกโหนด DOM และเลย์เอาต์/วินาที
หากผู้ใช้รายงานเวลาที่ใช้ในการโหลดที่ช้าในเว็บไซต์ เครื่องมือตรวจสอบประสิทธิภาพจะช่วยคุณระบุปัญหาได้
เช่น การใช้งาน CPU ที่เพิ่มขึ้นอย่างรวดเร็วอาจบ่งชี้ถึงโค้ดที่ไม่มีประสิทธิภาพ และโดยทั่วไปแล้ว หากหน้าเว็บมี JS event listeners จํานวนมาก ก็อาจเป็นประโยชน์ในการปรับโค้ดและลดจํานวนเหล่านั้นเพื่อเพิ่มพื้นที่ว่างในหน่วยความจํา
หากคุณเพิ่งเริ่มวิเคราะห์ประสิทธิภาพ เราขอแนะนําให้ใช้แผง Lighthouse ก่อน จากนั้นตรวจสอบเพิ่มเติมโดยใช้แผงประสิทธิภาพหรือเครื่องมือตรวจสอบประสิทธิภาพ