ประสิทธิภาพรันไทม์คือประสิทธิภาพของหน้าเว็บขณะทํางาน ไม่ใช่ขณะโหลด บทแนะนำนี้จะอธิบายวิธีใช้แผงประสิทธิภาพของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อวิเคราะห์ประสิทธิภาพรันไทม์ ในแง่ของรูปแบบ RAIL ทักษะที่คุณได้เรียนรู้ในบทแนะนํานี้จะมีประโยชน์สําหรับการวิเคราะห์ระยะการตอบสนอง ภาพเคลื่อนไหว และไม่มีการใช้งานของหน้าเว็บ
เริ่มต้นใช้งาน
ในบทแนะนํานี้ เราจะใช้แผงประสิทธิภาพเพื่อค้นหาปัญหาคอขวดด้านประสิทธิภาพในหน้าเว็บที่เผยแพร่อยู่ โดยทำตามขั้นตอนต่อไปนี้
- เปิด Google Chrome ในโหมดไม่ระบุตัวตน โหมดไม่ระบุตัวตนช่วยให้มั่นใจได้ว่า Chrome จะทำงานในสถานะที่สะอาด ตัวอย่างเช่น หากคุณติดตั้งส่วนขยายไว้จํานวนมาก ส่วนขยายเหล่านั้นอาจทําให้เกิดความผิดพลาดในการวัดประสิทธิภาพ
โหลดหน้าต่อไปนี้ในหน้าต่างที่ไม่ระบุตัวตน นี่คือเดโมที่คุณจะใช้สร้างโปรไฟล์ หน้าเว็บจะแสดงสี่เหลี่ยมจัตุรัสสีน้ำเงินเล็กๆ จำนวนมากที่เลื่อนขึ้นและลง
https://googlechrome.github.io/devtools-samples/jank/กด Command+Option+I (Mac) หรือ Control+Shift+I (Windows, Linux) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์