วิเคราะห์ประสิทธิภาพของรันไทม์

Kayce Basques

ประสิทธิภาพรันไทม์คือประสิทธิภาพของหน้าเว็บเมื่อหน้าเว็บทำงานอยู่ ไม่ใช่การโหลด บทแนะนำนี้จะสอนวิธีใช้แผงประสิทธิภาพเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อวิเคราะห์ประสิทธิภาพของรันไทม์ ในแง่ของโมเดล RAIL ทักษะที่คุณเรียนรู้ในบทแนะนำนี้มีประโยชน์สำหรับการวิเคราะห์ระยะการตอบสนอง ภาพเคลื่อนไหว และไม่มีการใช้งานในหน้าเว็บ

เริ่มต้นใช้งาน

ในบทแนะนำนี้ คุณเปิดเครื่องมือสำหรับนักพัฒนาเว็บในหน้าเว็บที่เผยแพร่อยู่และใช้แผงประสิทธิภาพเพื่อค้นหาจุดคอขวดของประสิทธิภาพในหน้านั้น

  1. เปิด Google Chrome ในโหมดไม่ระบุตัวตน โหมดไม่ระบุตัวตนทำให้ Chrome ทำงานได้อย่างปลอดภัย เช่น หากติดตั้งส่วนขยายไว้จำนวนมาก ส่วนขยายเหล่านั้นก็อาจทำให้เกิดความสับสนในการวัดประสิทธิภาพได้

  2. โหลดหน้าต่อไปนี้ในหน้าต่างที่ไม่ระบุตัวตน นี่คือการสาธิตว่าคุณจะเข้าสู่โปรไฟล์ หน้าเว็บแสดงสี่เหลี่ยมเล็กๆ สีน้ำเงินจำนวนมากที่เลื่อนขึ้นลง

    https://googlechrome.github.io/devtools-samples/jank/

  3. กด Command+Option+I (Mac) หรือ Control+Shift+I (Windows, Linux) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ

    การสาธิตทางด้านซ้าย และเครื่องมือสำหรับนักพัฒนาเว็บทางด้านขวา

    รูปที่ 1 การสาธิตทางด้านซ้าย และเครื่องมือสำหรับนักพัฒนาเว็บทางด้านขวา

จำลอง CPU บนอุปกรณ์เคลื่อนที่

อุปกรณ์เคลื่อนที่มี CPU น้อยกว่าเดสก์ท็อปและแล็ปท็อปมาก เมื่อใดก็ตามที่คุณทำโปรไฟล์เพจ ให้ใช้การควบคุม CPU เพื่อจำลองประสิทธิภาพของหน้าเว็บบนอุปกรณ์เคลื่อนที่

  1. คลิกแท็บประสิทธิภาพในเครื่องมือสำหรับนักพัฒนาเว็บ
  2. ตรวจสอบว่าได้เปิดใช้ช่องทำเครื่องหมายภาพหน้าจอแล้ว
  3. คลิกการตั้งค่าการจับภาพ การตั้งค่าการจับภาพ เครื่องมือสำหรับนักพัฒนาเว็บแสดงการตั้งค่าที่เกี่ยวข้องกับวิธีที่เครื่องมือบันทึกเมตริกประสิทธิภาพ

  4. สำหรับ CPU ให้เลือกช้าลง 2 เท่า เครื่องมือสำหรับนักพัฒนาเว็บจะควบคุม CPU ให้ช้าลงกว่าปกติ 2 เท่า

    การควบคุม CPU

    รูปที่ 2 การควบคุม CPU ที่แสดงด้วยสีน้ำเงิน

ตั้งค่าการสาธิต

การสร้างการสาธิตประสิทธิภาพรันไทม์นั้นเป็นเรื่องยากสำหรับผู้อ่านทุกคนของเว็บไซต์นี้ ส่วนนี้ช่วยให้คุณปรับแต่งการสาธิตเพื่อให้แน่ใจว่าประสบการณ์การใช้งานจะค่อนข้างสอดคล้องกับภาพหน้าจอและคำอธิบายที่คุณเห็นในบทแนะนำนี้ ไม่ว่าคุณจะตั้งค่าแบบไหนก็ตาม

  1. คลิกเพิ่ม 10 ต่อไปจนกว่าสี่เหลี่ยมจัตุรัสสีน้ำเงินจะเคลื่อนไหวช้ากว่าเดิมอย่างเห็นได้ชัด สำหรับเครื่องระดับไฮเอนด์ อาจใช้เวลาประมาณ 20 คลิก

  2. คลิกเพิ่มประสิทธิภาพ สี่เหลี่ยมสีน้ำเงินควรเคลื่อนที่เร็วขึ้นและราบรื่นขึ้น

  3. คลิกยกเลิกการเพิ่มประสิทธิภาพ สี่เหลี่ยมสีน้ำเงินจะเคลื่อนไหวช้าลงและเคลื่อนไหวน้อยลงอีกครั้ง

บันทึกประสิทธิภาพของรันไทม์

เมื่อคุณเรียกใช้หน้าเว็บเวอร์ชันที่เพิ่มประสิทธิภาพ สี่เหลี่ยมสีน้ำเงินจะเคลื่อนไหวเร็วขึ้น ทำไมจึงเป็นเช่นนั้น ทั้ง 2 เวอร์ชันควรย้ายแต่ละสี่เหลี่ยมจัตุรัสจํานวนเท่าๆ กันในระยะเวลาที่เท่ากัน บันทึกในแผงประสิทธิภาพเพื่อดูวิธีตรวจหาจุดคอขวดของประสิทธิภาพในเวอร์ชันที่ไม่ได้เพิ่มประสิทธิภาพ

  1. คลิกบันทึกในเครื่องมือสำหรับนักพัฒนาเว็บ บันทึก เครื่องมือสำหรับนักพัฒนาเว็บจะบันทึก เมตริกประสิทธิภาพขณะที่หน้าเว็บทำงาน

    การทำโปรไฟล์หน้าเว็บ

    รูปที่ 3: การทำโปรไฟล์หน้าเว็บ

  2. รอสักครู่

  3. คลิกหยุด เครื่องมือสำหรับนักพัฒนาเว็บจะหยุดบันทึก ประมวลผลข้อมูล จากนั้นแสดงผลลัพธ์ในแผงประสิทธิภาพ

    ผลลัพธ์ของโปรไฟล์

    รูปที่ 4: ผลลัพธ์ของโปรไฟล์

ว้าว จำนวนข้อมูลท่วมท้นเลยนะ ไม่ต้องกังวล ทุกอย่างจะมีความหมายมากขึ้นในเร็วๆ นี้

วิเคราะห์ผลลัพธ์

เมื่อคุณมีบันทึกประสิทธิภาพของหน้าเว็บแล้ว คุณสามารถวัดประสิทธิภาพของหน้าเว็บว่าแย่เพียงใดและค้นหาสาเหตุได้

วิเคราะห์เฟรมต่อวินาที

เมตริกหลักที่ใช้ในการวัดประสิทธิภาพของภาพเคลื่อนไหวคือเฟรมต่อวินาที (FPS) ผู้ใช้จะมีความสุขเมื่อภาพเคลื่อนไหวทำงานที่ 60 FPS

  1. ดูที่แผนภูมิ FPS เมื่อเห็นแถบสีแดงเหนือ FPS หมายความว่าอัตราเฟรมลดลงต่ำจนอาจเป็นอันตรายต่อประสบการณ์ของผู้ใช้ โดยทั่วไป ยิ่งแถบสีเขียว สูงขึ้นเท่าใด FPS ก็จะยิ่งสูงขึ้น

    แผนภูมิ FPS

    รูปที่ 5: แผนภูมิ FPS ขอบสีฟ้า

  2. ใต้แผนภูมิ FPS คุณจะเห็นแผนภูมิ CPU สีในแผนภูมิ CPU จะตรงกับสีในแท็บสรุปที่ด้านล่างของแผงประสิทธิภาพ การที่แผนภูมิ CPU เต็มไปด้วยสีหมายความว่า CPU นั้นมีขีดสุดขณะบันทึก เมื่อเห็น CPU ถึงขีดจำกัดเป็นเวลานานแล้ว ก็ช่วยให้คุณหาวิธีทำงานน้อยลง

    แผนภูมิ CPU และแท็บสรุป

    รูปที่ 6: แผนภูมิ CPU และแท็บสรุปที่แสดงเป็นสีน้ำเงิน

  3. วางเมาส์เหนือแผนภูมิ FPS, CPU หรือ NET เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงภาพหน้าจอของ หน้านั้น ณ เวลานั้น เลื่อนเมาส์ไปทางซ้ายหรือขวาเพื่อเล่นไฟล์บันทึกเสียงซ้ำ วิธีนี้เรียกว่าการสครับ และมีประโยชน์สำหรับการวิเคราะห์ความคืบหน้าของภาพเคลื่อนไหวด้วยตนเอง

    การดูภาพหน้าจอ

    รูปที่ 7: การดูภาพหน้าจอของหน้าเว็บในช่วงเวลา 2,000 มิลลิวินาทีของการบันทึก

  4. ในส่วนเฟรม ให้เลื่อนเมาส์ไปวางเหนือสี่เหลี่ยมสีเขียว เครื่องมือสำหรับนักพัฒนาเว็บจะแสดง FPS ของเฟรมนั้นๆ แต่ละเฟรมอาจต่ำกว่าเป้าหมายที่ 60 FPS

    วางเมาส์เหนือเฟรม

    รูปที่ 8: วางเมาส์เหนือเฟรม

แน่นอนว่าในการสาธิตนี้ เห็นได้ชัดว่าหน้าเว็บทำงานได้ไม่ดี แต่สถานการณ์จริงอาจไม่ชัดเจนนัก ดังนั้นการมีเครื่องมือทั้งหมดนี้ในการวัดจึงมีประโยชน์

โบนัส: เปิดเครื่องวัด FPS

เครื่องมือที่เป็นประโยชน์อีกอย่างคือตัววัด FPS ซึ่งจะให้ค่าประมาณแบบเรียลไทม์สำหรับ FPS ตามที่หน้าเว็บทำงานอยู่

  1. กด Command+Shift+P (Mac) หรือ Control+Shift+P (Windows, Linux) เพื่อเปิดเมนูคำสั่ง
  2. เริ่มพิมพ์ Rendering ในเมนูคำสั่งแล้วเลือกแสดงการแสดงภาพ

  3. ในแท็บการแสดงผล ให้เปิดใช้ตัวตรวจสอบ FPS การวางซ้อนใหม่จะปรากฏที่ด้านขวาบนของวิวพอร์ต

    เครื่องวัด FPS

    รูปที่ 9: เครื่องวัด FPS

  4. ปิดใช้ตัวตรวจสอบ FPS และกด Escape เพื่อปิดแท็บการแสดงผล คุณจะไม่ใช้วิธีนี้ในบทแนะนำนี้

หาจุดคอขวด

เมื่อคุณวัดและยืนยันว่าภาพเคลื่อนไหวทำงานได้ไม่ดีแล้ว คำถามถัดไปที่ควรตอบคือ ทำไม

  1. ดูที่แท็บสรุป เมื่อไม่ได้เลือกเหตุการณ์ แท็บนี้จะแสดงรายละเอียดของกิจกรรม หน้าเว็บใช้เวลาส่วนใหญ่ในการแสดงผล เนื่องจากประสิทธิภาพคือศิลปะในการทำงานให้น้อยลง เป้าหมายของคุณ จึงเป็นการลดระยะเวลาที่ใช้ในการแสดงภาพ

    แท็บสรุป

    รูปที่ 10: แท็บสรุปที่มีกรอบสีน้ำเงิน

  2. ขยายส่วนหลัก เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงแผนภูมิเปลวไฟของกิจกรรมบนเทรดหลักเมื่อเวลาผ่านไป แกน x หมายถึงการบันทึกตลอดช่วงเวลาที่ผ่านมา แต่ละแถบแสดงกิจกรรม แถบที่กว้างกว่าหมายความว่าเหตุการณ์ใช้เวลานานขึ้น แกน y แสดงถึงสแต็กการเรียกใช้ เมื่อคุณเห็นเหตุการณ์ซ้อนกัน หมายความว่าเหตุการณ์ที่อยู่อันดับต้นๆ ทำให้เกิดเหตุการณ์ลำดับต่ำ

    ส่วนหลัก

    รูปที่ 11: ส่วนหลัก ระบุเป็นสีน้ำเงิน

  3. มีข้อมูลมากมายในการบันทึก ซูมเข้าในเหตุการณ์เฟรมภาพเคลื่อนไหวที่เริ่มทำงาน โดยคลิกค้างไว้แล้วลากเมาส์ไปที่ภาพรวม ซึ่งเป็นส่วนที่มีแผนภูมิ FPS, CPU และ NET ส่วนหลักและแท็บสรุปจะแสดงเฉพาะข้อมูลของส่วนที่เลือกของการบันทึกเท่านั้น

    ซูมเข้าในเหตุการณ์หนึ่งที่เฟรมภาพเคลื่อนไหวเริ่มทำงาน

    รูปที่ 12: ซูมเข้าไปที่เหตุการณ์ที่เฟรมภาพเคลื่อนไหวเดียวเริ่มทำงาน

  4. สังเกตสามเหลี่ยมสีแดงที่ด้านขวาบนของเหตุการณ์เฟรมภาพเคลื่อนไหวเริ่มทำงาน เมื่อใดก็ตามที่คุณเห็นสามเหลี่ยมสีแดง ข้อความเตือนว่าอาจมีปัญหาที่เกี่ยวข้องกับเหตุการณ์นี้

  5. คลิกเหตุการณ์เฟรมภาพเคลื่อนไหวเริ่มทำงาน ตอนนี้แท็บสรุปจะแสดงข้อมูล เกี่ยวกับเหตุการณ์นั้น จดลิงก์เปิดเผย การคลิกที่ทำให้เครื่องมือสำหรับนักพัฒนาเว็บไฮไลต์เหตุการณ์ที่เริ่มต้นเหตุการณ์เฟรมภาพเคลื่อนไหวเริ่มทำงาน โปรดดูลิงก์ app.js:94 ด้วย เมื่อคุณคลิก ระบบจะพาคุณไปยังบรรทัดที่เกี่ยวข้องในซอร์สโค้ด

    ข้อมูลเพิ่มเติมเกี่ยวกับเหตุการณ์การเริ่มทำงานของเฟรมภาพเคลื่อนไหว

    รูปที่ 13: ข้อมูลเพิ่มเติมเกี่ยวกับเหตุการณ์การเริ่มทำงานของเฟรมภาพเคลื่อนไหว

  6. ในส่วนเหตุการณ์ app.update จะมีเหตุการณ์สีม่วงหลายรายการ ถ้าขนาดเหล่านั้นกว้างกว่านี้ จะดูเหมือนว่าแต่ละอันอาจมีรูปสามเหลี่ยมสีแดงวางอยู่ คลิกเหตุการณ์ Layout สีม่วงได้เลย เครื่องมือสำหรับนักพัฒนาเว็บให้ข้อมูลเพิ่มเติมเกี่ยวกับเหตุการณ์ในแท็บสรุป จริงๆ แล้วมีคำเตือนเกี่ยวกับการบังคับจัดเรียงใหม่ (อีกคำหนึ่งในเลย์เอาต์)

  7. ในแท็บสรุป ให้คลิกลิงก์ app.js:70 ภายใต้การจัดวางที่บังคับ เครื่องมือสำหรับนักพัฒนาเว็บจะนำคุณไปยังบรรทัดโค้ดที่บังคับเลย์เอาต์

    บรรทัดของโค้ดที่ทำให้เกิดการจัดวางที่บังคับ

    รูปที่ 13: บรรทัดโค้ดที่ทำให้เกิดเลย์เอาต์ที่บังคับ

ในที่สุด เรื่องนี้ต้องปรับปรุงเยอะมาก แต่ตอนนี้คุณมีรากฐานที่มั่นคงในเวิร์กโฟลว์พื้นฐานสำหรับการวิเคราะห์ประสิทธิภาพของรันไทม์แล้ว เก่งจัง

โบนัส: วิเคราะห์เวอร์ชันที่เพิ่มประสิทธิภาพแล้ว

เมื่อใช้เวิร์กโฟลว์และเครื่องมือที่เพิ่งได้เรียนรู้มา ให้คลิกเพิ่มประสิทธิภาพในการสาธิตเพื่อเปิดใช้โค้ดที่เพิ่มประสิทธิภาพ บันทึกประสิทธิภาพอีกครั้ง แล้ววิเคราะห์ผลลัพธ์ คุณจะเห็นว่าแอปเวอร์ชันที่เพิ่มประสิทธิภาพแล้วนั้นทำงานได้น้อยลงมาก ซึ่งส่งผลให้ประสิทธิภาพดีขึ้น ตั้งแต่เฟรมที่ได้รับการปรับปรุงไปจนถึงการลดกิจกรรมในแผนภูมิ Flame ของส่วนหลัก

ขั้นตอนถัดไป

พื้นฐานในการทำความเข้าใจประสิทธิภาพคือโมเดล RAIL โมเดลนี้จะสอนเมตริกประสิทธิภาพที่สำคัญที่สุดสำหรับผู้ใช้ ดูวัดประสิทธิภาพด้วยโมเดล RAIL เพื่อเรียนรู้เพิ่มเติม

เพื่อทำความคุ้นเคยกับแผงประสิทธิภาพ การฝึกฝนจะยิ่งทำให้สมบูรณ์ ลองสร้างโปรไฟล์หน้าเว็บของคุณเอง และวิเคราะห์ผลลัพธ์ หากมีข้อสงสัยเกี่ยวกับผลลัพธ์ ให้เปิดคำถามใน Stack Overflow ที่ติดแท็กด้วย google-chrome-devtools หากเป็นไปได้ ให้ใส่ภาพหน้าจอหรือลิงก์ไปยัง หน้าที่ทำซ้ำได้

ในการเป็นผู้เชี่ยวชาญด้านประสิทธิภาพรันไทม์ คุณจะต้องเรียนรู้วิธีที่เบราว์เซอร์แปล HTML, CSS และ JS เป็นพิกเซลบนหน้าจอ จุดเริ่มต้นที่ดีที่สุดคือภาพรวมประสิทธิภาพการแสดงผล The Anatomy Of A Frame เจาะลึกรายละเอียดยิ่งขึ้น

ข้อสุดท้ายคือการปรับปรุงประสิทธิภาพของรันไทม์ได้หลายวิธี บทแนะนํานี้มุ่งเน้นไปที่จุดคอขวดของภาพเคลื่อนไหวหนึ่งๆ เพื่อให้คุณทราบการทัวร์ชมแผงประสิทธิภาพอย่างเฉพาะเจาะจง แต่นี่เป็นเพียงหนึ่งในปัญหาคอขวดที่คุณอาจพบ ในซีรีส์ประสิทธิภาพการแสดงผลที่เหลือมีเคล็ดลับดีๆ มากมายสำหรับการปรับปรุงประสิทธิภาพรันไทม์ในด้านต่างๆ เช่น