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