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

เคย์เซ บาสก์

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

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

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

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

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

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

  3. กด Command+Option+I (Mac) หรือ Control+Shift+I (Windows, Linux) เพื่อเปิด DevTools

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

    รูปที่ 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. คุณจะเห็นแผนภูมิ CPU ใต้แผนภูมิ FPS สีในแผนภูมิ 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 จะมีกิจกรรมสีม่วงหลายรายการ ถ้าช่องแคบกว่าจะดูเหมือนว่าแต่ละอัน จะมีรูปสามเหลี่ยมสีแดง คลิกเหตุการณ์เลย์เอาต์สีม่วงกิจกรรมใดเหตุการณ์หนึ่งเลย เครื่องมือสำหรับนักพัฒนาเว็บให้ข้อมูลเพิ่มเติมเกี่ยวกับเหตุการณ์ในแท็บสรุป เรามีคำเตือนเกี่ยวกับ การจัดเรียงใหม่แบบบังคับ (ซึ่งเรียกอีกอย่างหนึ่งว่าเลย์เอาต์)

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

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

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

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

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

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

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

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

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

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

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