ประสิทธิภาพรันไทม์คือประสิทธิภาพของหน้าเว็บเมื่อหน้าเว็บทำงานอยู่ ไม่ใช่การโหลด บทแนะนำนี้จะสอนวิธีใช้แผงประสิทธิภาพเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อวิเคราะห์ประสิทธิภาพของรันไทม์ ในแง่ของโมเดล RAIL ทักษะที่คุณเรียนรู้ในบทแนะนำนี้มีประโยชน์สำหรับการวิเคราะห์ระยะการตอบสนอง ภาพเคลื่อนไหว และไม่มีการใช้งานในหน้าเว็บ
เริ่มต้นใช้งาน
ในบทแนะนำนี้ คุณเปิดเครื่องมือสำหรับนักพัฒนาเว็บในหน้าเว็บที่เผยแพร่อยู่และใช้แผงประสิทธิภาพเพื่อค้นหาจุดคอขวดของประสิทธิภาพในหน้านั้น
- เปิด Google Chrome ในโหมดไม่ระบุตัวตน โหมดไม่ระบุตัวตนทำให้ Chrome ทำงานได้อย่างปลอดภัย เช่น หากติดตั้งส่วนขยายไว้จำนวนมาก ส่วนขยายเหล่านั้นก็อาจทำให้เกิดความสับสนในการวัดประสิทธิภาพได้
โหลดหน้าต่อไปนี้ในหน้าต่างที่ไม่ระบุตัวตน นี่คือการสาธิตว่าคุณจะเข้าสู่โปรไฟล์ หน้าเว็บแสดงสี่เหลี่ยมเล็กๆ สีน้ำเงินจำนวนมากที่เลื่อนขึ้นลง
https://googlechrome.github.io/devtools-samples/jank/
กด Command+Option+I (Mac) หรือ Control+Shift+I (Windows, Linux) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
รูปที่ 1 การสาธิตทางด้านซ้าย และเครื่องมือสำหรับนักพัฒนาเว็บทางด้านขวา
จำลอง CPU บนอุปกรณ์เคลื่อนที่
อุปกรณ์เคลื่อนที่มี CPU น้อยกว่าเดสก์ท็อปและแล็ปท็อปมาก เมื่อใดก็ตามที่คุณทำโปรไฟล์เพจ ให้ใช้การควบคุม CPU เพื่อจำลองประสิทธิภาพของหน้าเว็บบนอุปกรณ์เคลื่อนที่
- คลิกแท็บประสิทธิภาพในเครื่องมือสำหรับนักพัฒนาเว็บ
- ตรวจสอบว่าได้เปิดใช้ช่องทำเครื่องหมายภาพหน้าจอแล้ว
- คลิกการตั้งค่าการจับภาพ
เครื่องมือสำหรับนักพัฒนาเว็บแสดงการตั้งค่าที่เกี่ยวข้องกับวิธีที่เครื่องมือบันทึกเมตริกประสิทธิภาพ
สำหรับ CPU ให้เลือกช้าลง 2 เท่า เครื่องมือสำหรับนักพัฒนาเว็บจะควบคุม CPU ให้ช้าลงกว่าปกติ 2 เท่า
รูปที่ 2 การควบคุม CPU ที่แสดงด้วยสีน้ำเงิน
ตั้งค่าการสาธิต
การสร้างการสาธิตประสิทธิภาพรันไทม์นั้นเป็นเรื่องยากสำหรับผู้อ่านทุกคนของเว็บไซต์นี้ ส่วนนี้ช่วยให้คุณปรับแต่งการสาธิตเพื่อให้แน่ใจว่าประสบการณ์การใช้งานจะค่อนข้างสอดคล้องกับภาพหน้าจอและคำอธิบายที่คุณเห็นในบทแนะนำนี้ ไม่ว่าคุณจะตั้งค่าแบบไหนก็ตาม
- คลิกเพิ่ม 10 ต่อไปจนกว่าสี่เหลี่ยมจัตุรัสสีน้ำเงินจะเคลื่อนไหวช้ากว่าเดิมอย่างเห็นได้ชัด สำหรับเครื่องระดับไฮเอนด์ อาจใช้เวลาประมาณ 20 คลิก
คลิกเพิ่มประสิทธิภาพ สี่เหลี่ยมสีน้ำเงินควรเคลื่อนที่เร็วขึ้นและราบรื่นขึ้น
คลิกยกเลิกการเพิ่มประสิทธิภาพ สี่เหลี่ยมสีน้ำเงินจะเคลื่อนไหวช้าลงและเคลื่อนไหวน้อยลงอีกครั้ง
บันทึกประสิทธิภาพของรันไทม์
เมื่อคุณเรียกใช้หน้าเว็บเวอร์ชันที่เพิ่มประสิทธิภาพ สี่เหลี่ยมสีน้ำเงินจะเคลื่อนไหวเร็วขึ้น ทำไมจึงเป็นเช่นนั้น ทั้ง 2 เวอร์ชันควรย้ายแต่ละสี่เหลี่ยมจัตุรัสจํานวนเท่าๆ กันในระยะเวลาที่เท่ากัน บันทึกในแผงประสิทธิภาพเพื่อดูวิธีตรวจหาจุดคอขวดของประสิทธิภาพในเวอร์ชันที่ไม่ได้เพิ่มประสิทธิภาพ
คลิกบันทึกในเครื่องมือสำหรับนักพัฒนาเว็บ
เครื่องมือสำหรับนักพัฒนาเว็บจะบันทึก เมตริกประสิทธิภาพขณะที่หน้าเว็บทำงาน
รูปที่ 3: การทำโปรไฟล์หน้าเว็บ
รอสักครู่
คลิกหยุด เครื่องมือสำหรับนักพัฒนาเว็บจะหยุดบันทึก ประมวลผลข้อมูล จากนั้นแสดงผลลัพธ์ในแผงประสิทธิภาพ
รูปที่ 4: ผลลัพธ์ของโปรไฟล์
ว้าว จำนวนข้อมูลท่วมท้นเลยนะ ไม่ต้องกังวล ทุกอย่างจะมีความหมายมากขึ้นในเร็วๆ นี้
วิเคราะห์ผลลัพธ์
เมื่อคุณมีบันทึกประสิทธิภาพของหน้าเว็บแล้ว คุณสามารถวัดประสิทธิภาพของหน้าเว็บว่าแย่เพียงใดและค้นหาสาเหตุได้
วิเคราะห์เฟรมต่อวินาที
เมตริกหลักที่ใช้ในการวัดประสิทธิภาพของภาพเคลื่อนไหวคือเฟรมต่อวินาที (FPS) ผู้ใช้จะมีความสุขเมื่อภาพเคลื่อนไหวทำงานที่ 60 FPS
ดูที่แผนภูมิ FPS เมื่อเห็นแถบสีแดงเหนือ FPS หมายความว่าอัตราเฟรมลดลงต่ำจนอาจเป็นอันตรายต่อประสบการณ์ของผู้ใช้ โดยทั่วไป ยิ่งแถบสีเขียว สูงขึ้นเท่าใด FPS ก็จะยิ่งสูงขึ้น
รูปที่ 5: แผนภูมิ FPS ขอบสีฟ้า
ใต้แผนภูมิ FPS คุณจะเห็นแผนภูมิ CPU สีในแผนภูมิ 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 จะมีเหตุการณ์สีม่วงหลายรายการ ถ้าขนาดเหล่านั้นกว้างกว่านี้ จะดูเหมือนว่าแต่ละอันอาจมีรูปสามเหลี่ยมสีแดงวางอยู่ คลิกเหตุการณ์ Layout สีม่วงได้เลย เครื่องมือสำหรับนักพัฒนาเว็บให้ข้อมูลเพิ่มเติมเกี่ยวกับเหตุการณ์ในแท็บสรุป จริงๆ แล้วมีคำเตือนเกี่ยวกับการบังคับจัดเรียงใหม่ (อีกคำหนึ่งในเลย์เอาต์)
ในแท็บสรุป ให้คลิกลิงก์ app.js:70 ภายใต้การจัดวางที่บังคับ เครื่องมือสำหรับนักพัฒนาเว็บจะนำคุณไปยังบรรทัดโค้ดที่บังคับเลย์เอาต์
รูปที่ 13: บรรทัดโค้ดที่ทำให้เกิดเลย์เอาต์ที่บังคับ
ในที่สุด เรื่องนี้ต้องปรับปรุงเยอะมาก แต่ตอนนี้คุณมีรากฐานที่มั่นคงในเวิร์กโฟลว์พื้นฐานสำหรับการวิเคราะห์ประสิทธิภาพของรันไทม์แล้ว เก่งจัง
โบนัส: วิเคราะห์เวอร์ชันที่เพิ่มประสิทธิภาพแล้ว
เมื่อใช้เวิร์กโฟลว์และเครื่องมือที่เพิ่งได้เรียนรู้มา ให้คลิกเพิ่มประสิทธิภาพในการสาธิตเพื่อเปิดใช้โค้ดที่เพิ่มประสิทธิภาพ บันทึกประสิทธิภาพอีกครั้ง แล้ววิเคราะห์ผลลัพธ์ คุณจะเห็นว่าแอปเวอร์ชันที่เพิ่มประสิทธิภาพแล้วนั้นทำงานได้น้อยลงมาก ซึ่งส่งผลให้ประสิทธิภาพดีขึ้น ตั้งแต่เฟรมที่ได้รับการปรับปรุงไปจนถึงการลดกิจกรรมในแผนภูมิ Flame ของส่วนหลัก
ขั้นตอนถัดไป
พื้นฐานในการทำความเข้าใจประสิทธิภาพคือโมเดล RAIL โมเดลนี้จะสอนเมตริกประสิทธิภาพที่สำคัญที่สุดสำหรับผู้ใช้ ดูวัดประสิทธิภาพด้วยโมเดล RAIL เพื่อเรียนรู้เพิ่มเติม
เพื่อทำความคุ้นเคยกับแผงประสิทธิภาพ การฝึกฝนจะยิ่งทำให้สมบูรณ์ ลองสร้างโปรไฟล์หน้าเว็บของคุณเอง
และวิเคราะห์ผลลัพธ์ หากมีข้อสงสัยเกี่ยวกับผลลัพธ์ ให้เปิดคำถามใน Stack Overflow ที่ติดแท็กด้วย google-chrome-devtools
หากเป็นไปได้ ให้ใส่ภาพหน้าจอหรือลิงก์ไปยัง
หน้าที่ทำซ้ำได้
ในการเป็นผู้เชี่ยวชาญด้านประสิทธิภาพรันไทม์ คุณจะต้องเรียนรู้วิธีที่เบราว์เซอร์แปล HTML, CSS และ JS เป็นพิกเซลบนหน้าจอ จุดเริ่มต้นที่ดีที่สุดคือภาพรวมประสิทธิภาพการแสดงผล The Anatomy Of A Frame เจาะลึกรายละเอียดยิ่งขึ้น
ข้อสุดท้ายคือการปรับปรุงประสิทธิภาพของรันไทม์ได้หลายวิธี บทแนะนํานี้มุ่งเน้นไปที่จุดคอขวดของภาพเคลื่อนไหวหนึ่งๆ เพื่อให้คุณทราบการทัวร์ชมแผงประสิทธิภาพอย่างเฉพาะเจาะจง แต่นี่เป็นเพียงหนึ่งในปัญหาคอขวดที่คุณอาจพบ ในซีรีส์ประสิทธิภาพการแสดงผลที่เหลือมีเคล็ดลับดีๆ มากมายสำหรับการปรับปรุงประสิทธิภาพรันไทม์ในด้านต่างๆ เช่น