ประสิทธิภาพรันไทม์คือประสิทธิภาพการทำงานของหน้าเว็บของคุณเมื่อทำงานอยู่ ไม่ใช่การโหลด บทแนะนำนี้จะสอนวิธีใช้แผงประสิทธิภาพของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อวิเคราะห์ประสิทธิภาพของรันไทม์ ในแง่ของโมเดล RAIL ทักษะที่คุณเรียนรู้ในบทแนะนำนี้จะมีประโยชน์สำหรับการวิเคราะห์ระยะการตอบสนอง ภาพเคลื่อนไหว และไม่มีการใช้งานของหน้าเว็บ
เริ่มต้นใช้งาน
ในบทแนะนำนี้ คุณสามารถเปิดเครื่องมือสำหรับนักพัฒนาเว็บในหน้าเว็บที่เผยแพร่อยู่ และใช้แผงประสิทธิภาพเพื่อค้นหาจุดคอขวดของประสิทธิภาพในหน้าเว็บ
- เปิด Google Chrome ในโหมดไม่ระบุตัวตน โหมดไม่ระบุตัวตนจะช่วยให้ Chrome ทำงานได้อย่างปลอดภัย เช่น หากคุณติดตั้งส่วนขยายไว้จำนวนมาก ส่วนขยายเหล่านั้นอาจทำให้เกิดความสับสนในการวัดประสิทธิภาพ
โหลดหน้าต่อไปนี้ในหน้าต่างที่ไม่ระบุตัวตน นี่คือการสาธิตที่คุณจะใช้สร้างโปรไฟล์ หน้าเว็บแสดงสี่เหลี่ยมจัตุรัสเล็กๆ สีฟ้าจำนวนมากที่เลื่อนขึ้นลง
https://googlechrome.github.io/devtools-samples/jank/
กด Command+Option+I (Mac) หรือ Control+Shift+I (Windows, Linux) เพื่อเปิด DevTools
รูปที่ 1 เดโมทางด้านซ้าย และเครื่องมือสำหรับนักพัฒนาเว็บทางด้านขวา
จำลอง CPU อุปกรณ์เคลื่อนที่
อุปกรณ์เคลื่อนที่มี CPU น้อยกว่าเดสก์ท็อปและแล็ปท็อปมาก เมื่อใดก็ตามที่คุณทำโปรไฟล์หน้าเว็บ ให้ใช้การควบคุม CPU เพื่อจำลองประสิทธิภาพของหน้าเว็บบนอุปกรณ์เคลื่อนที่
- คลิกแท็บประสิทธิภาพในเครื่องมือสำหรับนักพัฒนาเว็บ
- ตรวจสอบว่าช่องทำเครื่องหมายภาพหน้าจอเปิดอยู่
- คลิกการตั้งค่าการจับภาพ เครื่องมือสำหรับนักพัฒนาเว็บแสดงการตั้งค่าที่เกี่ยวข้องกับวิธีที่เครื่องมือบันทึกเมตริกประสิทธิภาพ
สำหรับ CPU ให้เลือกช้าลง 2 เท่า เครื่องมือสำหรับนักพัฒนาเว็บจะควบคุม CPU ให้ช้าลงกว่าปกติ 2 เท่า
รูปที่ 2 การควบคุม CPU แสดงด้วยสีฟ้า
ตั้งค่าการสาธิต
การสร้างการสาธิตประสิทธิภาพรันไทม์ที่ทำงานอย่างสอดคล้องกันสำหรับผู้อ่านทุกคนของเว็บไซต์นี้เป็นเรื่องยาก ส่วนนี้ช่วยให้คุณปรับแต่งการสาธิตเพื่อให้แน่ใจว่าประสบการณ์ของคุณจะค่อนข้างสอดคล้องกับภาพหน้าจอและคำอธิบายที่คุณเห็นในบทแนะนำนี้ ไม่ว่าคุณจะตั้งค่าอะไรก็ตาม
- คลิกเพิ่ม 10 ค้างไว้จนกว่าสี่เหลี่ยมจัตุรัสสีน้ำเงินจะเคลื่อนไหวช้ากว่าเดิมอย่างเห็นได้ชัด สำหรับเครื่องระดับไฮเอนด์ อาจใช้เวลาประมาณ 20 คลิก
คลิกเพิ่มประสิทธิภาพ สี่เหลี่ยมสีน้ำเงินควรเคลื่อนที่เร็วขึ้นและราบรื่นขึ้น
คลิกยกเลิกการเพิ่มประสิทธิภาพ สี่เหลี่ยมสีน้ำเงินเคลื่อนไหวช้าลงและกระตุกมากขึ้นอีก
บันทึกประสิทธิภาพของรันไทม์
เมื่อคุณเรียกใช้หน้าเว็บในเวอร์ชันเพิ่มประสิทธิภาพ รูปสี่เหลี่ยมสีน้ำเงินจะเคลื่อนไหวเร็วขึ้น ทำไมจึงเป็นเช่นนั้น ทั้ง 2 เวอร์ชันควรเลื่อนแต่ละรูปสี่เหลี่ยมจัตุรัสในจำนวนที่เท่ากันในระยะเวลาเท่ากัน บันทึกในแผงประสิทธิภาพเพื่อดูวิธีตรวจหาจุดคอขวดของประสิทธิภาพในเวอร์ชันที่ไม่ได้เพิ่มประสิทธิภาพ
คลิกบันทึก ในเครื่องมือสำหรับนักพัฒนาเว็บ เครื่องมือสำหรับนักพัฒนาเว็บจะบันทึกเมตริกประสิทธิภาพขณะที่หน้าเว็บทำงาน
รูปที่ 3: การทำโปรไฟล์ของหน้า
รอสักครู่
คลิกหยุด เครื่องมือสำหรับนักพัฒนาเว็บจะหยุดบันทึก ประมวลผลข้อมูล แล้วแสดงผลลัพธ์ในแผงประสิทธิภาพ
รูปที่ 4: ผลลัพธ์ของโปรไฟล์
โอ้โห มีข้อมูลมากเกินไป อย่ากังวล ทุกอย่างจะมีประสิทธิภาพมากขึ้นในเร็วๆ นี้
วิเคราะห์ผลลัพธ์
เมื่อบันทึกประสิทธิภาพของหน้าแล้ว คุณจะวัดประสิทธิภาพของหน้าว่าแย่เพียงใดและค้นหาสาเหตุได้
วิเคราะห์เฟรมต่อวินาที
เมตริกหลักที่ใช้ในการวัดประสิทธิภาพของภาพเคลื่อนไหวคือเฟรมต่อวินาที (FPS) ผู้ใช้จะมีความสุขเมื่อภาพเคลื่อนไหวทำงานที่ 60 FPS
ดูที่แผนภูมิ FPS เมื่อเห็นแถบสีแดงเหนือ FPS หมายความว่าอัตราเฟรมลดลงจนอาจเป็นอันตรายต่อประสบการณ์ของผู้ใช้ โดยทั่วไปแล้ว ยิ่งแถบสีเขียว สูงเท่าใด FPS ก็จะยิ่งสูงขึ้น
รูปที่ 5: แผนภูมิ FPS ที่แสดงเป็นสีน้ำเงิน
คุณจะเห็นแผนภูมิ CPU ใต้แผนภูมิ FPS สีในแผนภูมิ CPU จะตรงกับสีในแท็บสรุปที่ด้านล่างของแผงประสิทธิภาพ การที่แผนภูมิ CPU เป็นสีที่มีสีแสดงว่ามีการใช้งาน CPU ถึงขีดจำกัดแล้ว เมื่อใดก็ตามที่คุณเห็นว่า CPU ถึงขีดจำกัดเป็นระยะเวลานานๆ แล้ว ก็ขอแนะนำให้หาวิธีทำงานน้อยลง
รูปที่ 6: แผนภูมิ CPU และแท็บสรุปที่แสดงเป็นสีน้ำเงิน
วางเมาส์เหนือแผนภูมิ FPS, CPU หรือ NET เครื่องมือสำหรับนักพัฒนาเว็บแสดงภาพหน้าจอของหน้าเว็บ ณ เวลานั้น เลื่อนเมาส์ไปทางซ้ายและขวาเพื่อเล่นการบันทึกซ้ำ วิธีนี้เรียกว่าการสครับ และมีประโยชน์ในการวิเคราะห์ความคืบหน้าของภาพเคลื่อนไหวด้วยตนเอง
รูปที่ 7: การดูภาพหน้าจอของหน้าเว็บซึ่งอยู่ในช่วงระยะ 2,000 มิลลิวินาทีของการบันทึก
ในส่วนเฟรม ให้เลื่อนเมาส์ไปวางเหนือสี่เหลี่ยมสีเขียว เครื่องมือสำหรับนักพัฒนาเว็บจะแสดง FPS สำหรับเฟรมนั้น แต่ละเฟรมน่าจะต่ำกว่าเป้าหมายที่ 60 FPS
รูปที่ 8: การวางเมาส์เหนือเฟรม
แน่นอนว่าจากการสาธิตนี้ เห็นได้ชัดว่าหน้านั้นทำงานได้ไม่ดี แต่ในสถานการณ์จริง ๆ อาจไม่ชัดเจนนัก ดังนั้นการมีเครื่องมือทั้งหมดนี้เพื่อใช้การวัดจะเป็นประโยชน์ต่อคุณ
โบนัส: เปิดมิเตอร์ FPS
เครื่องมือที่มีประโยชน์อีกอย่างคือตัววัด FPS ซึ่งจะแสดงค่าประมาณแบบเรียลไทม์สำหรับ FPS ขณะที่หน้าเว็บทำงาน
- กด Command+Shift+P (Mac) หรือ Control+Shift+P (Windows, Linux) เพื่อเปิดเมนูคำสั่ง
- เริ่มพิมพ์
Rendering
ในเมนูคำสั่ง แล้วเลือกแสดงการแสดงผล ในแท็บการแสดงผล ให้เปิดใช้ตัวตรวจสอบ FPS การวางซ้อนใหม่จะปรากฏที่ด้านขวาบนของวิวพอร์ต
รูปที่ 9: เครื่องวัด FPS
ปิดใช้ตัววัด FPS แล้วกด Escape เพื่อปิดแท็บการแสดงผล ซึ่งคุณจะไม่ได้ใช้ในบทแนะนำนี้
ค้นหาจุดคอขวด
เมื่อคุณวัดและยืนยันได้ว่าภาพเคลื่อนไหวทำงานไม่ดีแล้ว คำถามต่อไปที่ควรตอบคือเพราะเหตุใด
ดูที่แท็บสรุป เมื่อไม่ได้เลือกเหตุการณ์ใดๆ แท็บนี้จะแสดงรายละเอียดของกิจกรรม หน้าเว็บใช้เวลาส่วนใหญ่ในการแสดงผล เนื่องจากประสิทธิภาพคือศิลปะในงานที่น้อยลง เป้าหมายของคุณคือการลดเวลาที่ใช้ในการแสดงภาพ
รูปที่ 10: แท็บสรุปมีเส้นขอบสีน้ำเงิน
ขยายส่วนหลัก เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงแผนภูมิเปลวไฟของกิจกรรมในเทรดหลักเมื่อเวลาผ่านไป แกน x จะแสดงการบันทึกในช่วงเวลาที่ผ่านมา แท่งกราฟแต่ละแท่งแสดงถึงกิจกรรม แถบที่กว้างกว่าจะทำให้ เหตุการณ์ใช้เวลานานขึ้น แกน y หมายถึงสแต็กการเรียกใช้ เมื่อคุณเห็นเหตุการณ์ซ้อนกัน หมายความว่าเหตุการณ์ที่อยู่สูงทำให้เกิดเหตุการณ์ระดับล่าง
รูปที่ 11: ส่วน "หลัก" สีฟ้า
มีข้อมูลมากมายในการบันทึก ซูมเข้าไปที่เหตุการณ์เฟรมภาพเคลื่อนไหวทำงานที่เหตุการณ์เดียว โดยคลิกค้างไว้แล้วลากเมาส์ไปที่ภาพรวม ซึ่งเป็นส่วนที่รวมแผนภูมิ FPS, CPU และ NET ส่วนหลักและแท็บสรุปจะแสดงเฉพาะข้อมูล สำหรับส่วนที่เลือกของการบันทึกเท่านั้น
รูปที่ 12: ซูมเข้าไปที่เหตุการณ์เฟรมภาพเคลื่อนไหวที่เริ่มทำงานครั้งเดียว
สังเกตสามเหลี่ยมสีแดงที่ด้านขวาบนของเหตุการณ์เฟรมภาพเคลื่อนไหวเริ่มทำงาน เมื่อใดก็ตามที่คุณเห็น รูปสามเหลี่ยมสีแดง ข้อความเตือนว่าอาจมีปัญหาที่เกี่ยวข้องกับเหตุการณ์นี้
คลิกเหตุการณ์เฟรมภาพเคลื่อนไหวเริ่มทำงาน ตอนนี้แท็บสรุปจะแสดงข้อมูล เกี่ยวกับเหตุการณ์นั้น โปรดสังเกตลิงก์แสดง การคลิกที่ทำให้เครื่องมือสำหรับนักพัฒนาเว็บไฮไลต์เหตุการณ์ที่เริ่มต้นเหตุการณ์เฟรมภาพเคลื่อนไหวเริ่มทำงาน โปรดสังเกตลิงก์ app.js:94 ด้วย การคลิกดังกล่าวจะนำคุณไปยังบรรทัดที่เกี่ยวข้องในซอร์สโค้ด
รูปที่ 13: ข้อมูลเพิ่มเติมเกี่ยวกับเหตุการณ์เฟรมที่เริ่มทำงานของภาพเคลื่อนไหว
ใต้เหตุการณ์ app.update จะมีกิจกรรมสีม่วงหลายรายการ ถ้าช่องแคบกว่าจะดูเหมือนว่าแต่ละอัน จะมีรูปสามเหลี่ยมสีแดง คลิกเหตุการณ์เลย์เอาต์สีม่วงกิจกรรมใดเหตุการณ์หนึ่งเลย เครื่องมือสำหรับนักพัฒนาเว็บให้ข้อมูลเพิ่มเติมเกี่ยวกับเหตุการณ์ในแท็บสรุป เรามีคำเตือนเกี่ยวกับ การจัดเรียงใหม่แบบบังคับ (ซึ่งเรียกอีกอย่างหนึ่งว่าเลย์เอาต์)
ในแท็บสรุป ให้คลิกลิงก์ app.js:70 ในส่วนบังคับการจัดวาง เครื่องมือสำหรับนักพัฒนาเว็บจะพาคุณ ไปยังบรรทัดโค้ดที่บังคับเลย์เอาต์
รูปที่ 13: บรรทัดของโค้ดที่ทำให้เกิดการจัดวางแบบบังคับ
ในที่สุด ซึ่งเป็นเรื่องที่ต้องยอมรับมาก แต่ตอนนี้คุณมีรากฐานที่มั่นคงในเวิร์กโฟลว์พื้นฐานเพื่อวิเคราะห์ประสิทธิภาพของรันไทม์แล้ว เก่งจัง
โบนัส: วิเคราะห์เวอร์ชันที่เพิ่มประสิทธิภาพ
เมื่อใช้เวิร์กโฟลว์และเครื่องมือที่เพิ่งได้เรียนรู้มา ให้คลิกเพิ่มประสิทธิภาพในการสาธิตเพื่อเปิดใช้โค้ดที่เพิ่มประสิทธิภาพ บันทึกประสิทธิภาพอีกรายการ แล้ววิเคราะห์ผลลัพธ์ จากอัตราเฟรมที่ปรับปรุงแล้วไปจนถึงการลดกิจกรรมในแผนภูมิ Fla ของส่วน Main คุณจะเห็นว่าแอปเวอร์ชันที่เพิ่มประสิทธิภาพแล้วทำงานได้น้อยลงอย่างมาก ซึ่งส่งผลให้มีประสิทธิภาพดีขึ้น
ขั้นตอนถัดไป
พื้นฐานในการทำความเข้าใจประสิทธิภาพคือโมเดล RAIL โมเดลนี้จะสอนเมตริกประสิทธิภาพที่สำคัญต่อผู้ใช้มากที่สุด ดูวัดประสิทธิภาพด้วยโมเดล RAIL เพื่อเรียนรู้เพิ่มเติม
เพื่อทำความคุ้นเคยกับแผงประสิทธิภาพ การฝึกฝนจะยิ่งสมบูรณ์แบบ ลองสร้างโปรไฟล์หน้าของคุณเอง
และวิเคราะห์ผลลัพธ์ หากมีข้อสงสัยเกี่ยวกับผลลัพธ์ ให้เปิดคำถามใน Stack Overflow ที่แท็กด้วย google-chrome-devtools
ใส่ภาพหน้าจอหรือลิงก์ไปยัง
หน้าที่จำลองซ้ำได้ ถ้าเป็นไปได้
หากต้องการเป็นผู้เชี่ยวชาญด้านประสิทธิภาพรันไทม์ คุณต้องเรียนรู้วิธีที่เบราว์เซอร์แปล HTML, CSS และ JS เป็นพิกเซลบนหน้าจอ เริ่มจากภาพรวมประสิทธิภาพของการแสดงผล The Anatomy Of A Frame เจาะลึกในรายละเอียดเพิ่มเติม
สุดท้ายนี้ มีหลายวิธีในการปรับปรุงประสิทธิภาพของรันไทม์ บทแนะนํานี้มุ่งเน้นที่จุดคอขวดของภาพเคลื่อนไหวหนึ่งๆ เพื่อให้คุณดูบทแนะนำอย่างเฉพาะเจาะจงผ่านแผงประสิทธิภาพ แต่เป็นเพียงหนึ่งในปัญหาคอขวดที่คุณอาจพบ ชุดประสิทธิภาพการแสดงผลที่เหลือมีเคล็ดลับดีๆ มากมายสำหรับการปรับปรุงประสิทธิภาพรันไทม์ในด้านต่างๆ เช่น