ใช้แผงประสิทธิภาพเพื่อวิเคราะห์ประสิทธิภาพของเว็บไซต์
ภาพรวม
แผงประสิทธิภาพช่วยให้คุณบันทึกโปรไฟล์ประสิทธิภาพของ CPU ของเว็บแอปพลิเคชันได้ วิเคราะห์โปรไฟล์เพื่อค้นหาจุดคอขวดด้านประสิทธิภาพที่อาจเกิดขึ้นและวิธีที่คุณสามารถเพิ่มประสิทธิภาพการใช้งานทรัพยากร
ใช้แผงประสิทธิภาพเพื่อทําสิ่งต่อไปนี้
- บันทึกโปรไฟล์ด้านประสิทธิภาพ
- เปลี่ยนการตั้งค่าการจับภาพ
- วิเคราะห์รายงานประสิทธิภาพ
ดูคำแนะนำที่ครอบคลุมเกี่ยวกับการปรับปรุงประสิทธิภาพเว็บไซต์ได้ที่วิเคราะห์ประสิทธิภาพรันไทม์
เปิดแผงประสิทธิภาพ
หากต้องการเปิดแผงประสิทธิภาพ ให้เปิดเครื่องมือสำหรับนักพัฒนาเว็บ แล้วเลือกประสิทธิภาพจากชุดแท็บที่ด้านบน
หรือทําตามขั้นตอนต่อไปนี้เพื่อเปิดแผงประสิทธิภาพด้วยเมนูคําสั่ง
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- เปิดเมนูคำสั่งโดยกด
- สำหรับ macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
- เริ่มพิมพ์
Performance panelแล้วเลือกแสดงแผงประสิทธิภาพ แล้วกด Enter
บันทึกโปรไฟล์ประสิทธิภาพ
เมื่อพร้อมที่จะบันทึก แผงประสิทธิภาพจะมีตัวเลือกต่อไปนี้
- บันทึกประสิทธิภาพรันไทม์
- บันทึกประสิทธิภาพการโหลด
- ถ่ายภาพหน้าจอขณะบันทึก
- บังคับเก็บขยะขณะบันทึก
- บันทึกวิดีโอการประชุม
- โหลดไฟล์บันทึกเสียง
- ล้างไฟล์บันทึกเสียง
เปลี่ยนการตั้งค่าการบันทึก
การตั้งค่าการจับภาพช่วยให้คุณเปลี่ยนวิธีที่เครื่องมือสำหรับนักพัฒนาเว็บบันทึกข้อมูลประสิทธิภาพการทำงาน และให้ข้อมูลเพิ่มเติมในรายงานได้ คลิกการตั้งค่าการจับภาพ การตั้งค่าเพื่อเข้าถึงเมนูการตั้งค่าการจับภาพ
เลือกตัวเลือกต่อไปนี้จากเมนูการตั้งค่าการจับภาพ
- ปิดใช้ตัวอย่าง JavaScript: ปิดใช้การบันทึก Call Stack ของ JavaScript ที่แสดงในแทร็กหลักที่มีการเรียกใช้ระหว่างการบันทึก จะช่วยลดค่าใช้จ่ายด้านประสิทธิภาพ
- เปิดใช้การวัดคุมการแสดงผลขั้นสูง (ช้า): บันทึกการวัดคุมการแสดงผลขั้นสูง ขัดขวางประสิทธิภาพเป็นอย่างมาก
- เปิดใช้สถิติตัวเลือก CSS (ช้า): บันทึกสถิติตัวเลือก CSS ขัดขวางประสิทธิภาพเป็นอย่างมาก
- การควบคุม CPU: จำลองความเร็วของ CPU ที่ช้าลง
- การควบคุมเครือข่าย: จำลองความเร็วของเครือข่ายที่ช้ากว่า
- การเกิดขึ้นพร้อมกันของฮาร์ดแวร์: กำหนดค่าที่
navigator.hardwareConcurrencyรายงาน
วิเคราะห์รายงานประสิทธิภาพ
ดูคู่มือฉบับเต็มเกี่ยวกับวิธีใช้แผงประสิทธิภาพได้ในวิเคราะห์การบันทึกประสิทธิภาพ
ข้อมูลต่อไปนี้จะแสดงการจัดกลุ่มหัวข้อจากคำแนะนำรวมทั้งเอกสารอื่นๆ ที่เป็นประโยชน์
วิธีไปยังส่วนต่างๆ ของรายงาน
หากต้องการดูวิธีมุ่งเน้นสิ่งที่สำคัญต่อเวิร์กโฟลว์
- เปลี่ยนลำดับของแทร็กและซ่อนแทร็ก
- ซ่อนฟังก์ชันและองค์ประกอบย่อยในแผนภูมิ Flame
- สร้างเบรดครัมบ์และข้ามไปมาระหว่างระดับการซูม
หากต้องการดูข้อมูลเกี่ยวกับแท็บ "ล่างขึ้นบน" โครงสร้างการโทร และบันทึกเหตุการณ์
วิธีวิเคราะห์รายงาน
- ดูกิจกรรมของเทรดหลัก
- อ่านแผนภูมิเปลวไฟ
- ดูภาพหน้าจอ
- ดูเมตริกหน่วยความจำ
- ดูระยะเวลาของการบันทึกบางส่วน
- วิเคราะห์ประสิทธิภาพของตัวเลือก CSS ระหว่างคำนวณเหตุการณ์รูปแบบใหม่
- ประสิทธิภาพของ Node.js ในโปรไฟล์ด้วยแผงประสิทธิภาพ
- วิเคราะห์เฟรมต่อวินาที (FPS)
- ข้อมูลอ้างอิงเหตุการณ์ในไทม์ไลน์
ปรับปรุงประสิทธิภาพด้วยแผงเหล่านี้
สำรวจแผงอื่นๆ ที่ช่วยปรับปรุงประสิทธิภาพของเว็บไซต์ได้