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