ข้อมูลอ้างอิงฟีเจอร์ด้านประสิทธิภาพ

Kayce Basques

Sofia Emelianova

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

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

บันทึกประสิทธิภาพ

คุณบันทึกรันไทม์หรือประสิทธิภาพในการโหลดได้

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

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

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

3. คลิกบันทึก

   

4. โต้ตอบกับหน้าเว็บ เครื่องมือสำหรับนักพัฒนาเว็บจะบันทึกกิจกรรมหน้าเว็บทั้งหมดที่เกิดจากการโต้ตอบของคุณ

5. คลิกบันทึกอีกครั้ง หรือคลิกหยุดเพื่อหยุดบันทึก

บันทึกประสิทธิภาพการโหลด

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

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

3. คลิกเริ่มทำโปรไฟล์และโหลดหน้าเว็บซ้ำ อันดับแรกเครื่องมือสำหรับนักพัฒนาเว็บจะไปที่ about:blank เพื่อล้างภาพหน้าจอและการติดตามที่เหลืออยู่ จากนั้นเครื่องมือสำหรับนักพัฒนาเว็บจะบันทึกเมตริกประสิทธิภาพขณะที่หน้าเว็บโหลดซ้ำ จากนั้นจะหยุดการบันทึกโดยอัตโนมัติ 2-3 วินาทีหลังจากที่การโหลดเสร็จสิ้น

   

เครื่องมือสำหรับนักพัฒนาเว็บจะซูมเข้าโดยอัตโนมัติในส่วนการบันทึกที่เกิดกิจกรรมส่วนใหญ่

ในตัวอย่างนี้ แผงประสิทธิภาพจะแสดงกิจกรรมระหว่างการโหลดหน้าเว็บ

จับภาพหน้าจอขณะบันทึก

เปิดใช้ช่องทำเครื่องหมายภาพหน้าจอเพื่อจับภาพหน้าจอของทุกเฟรมขณะบันทึก

โปรดดูที่ดูภาพหน้าจอเพื่อเรียนรู้วิธีโต้ตอบกับภาพหน้าจอ

บังคับเก็บขยะขณะบันทึก

ขณะบันทึกหน้าเว็บ ให้คลิกไม้ถูพื้นเก็บขยะเพื่อบังคับให้เก็บขยะ

แสดงการตั้งค่าการบันทึก

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

ปิดใช้ตัวอย่าง JavaScript

โดยค่าเริ่มต้น แทร็กหลักของการบันทึกจะแสดงสแต็ก Call ของฟังก์ชัน JavaScript โดยละเอียดที่มีการเรียกใช้ระหว่างการบันทึก หากต้องการปิดใช้สแต็กการเรียกใช้เหล่านี้ ให้ทำดังนี้

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

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

ตัวอย่างนี้แสดงการบันทึกที่มีตัวอย่าง JS ที่ปิดใช้

ตัวอย่างนี้แสดงการบันทึกที่มีตัวอย่าง JS ที่เปิดใช้

กดควบคุมเครือข่ายขณะบันทึก

หากต้องการควบคุมการเชื่อมต่อเครือข่ายขณะบันทึก ให้ทำดังนี้

1. เปิดเมนูการตั้งค่าการจับภาพ ดูแสดงการตั้งค่าการบันทึก
2. ตั้งค่าเครือข่ายเป็นระดับการควบคุมที่เลือก

ควบคุม CPU ขณะบันทึก

วิธีควบคุมการทำงานของ CPU ขณะบันทึก

1. เปิดเมนูการตั้งค่าการจับภาพ ดูแสดงการตั้งค่าการบันทึก
2. ตั้งค่า CPU เป็นระดับการควบคุมที่เลือก

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

เปิดใช้การวัดคุมการแสดงผลขั้นสูง

วิธีดูการวัดคุมการแสดงผลอย่างละเอียด

1. เปิดเมนูการตั้งค่าการจับภาพ ดูแสดงการตั้งค่าการบันทึก
2. เลือกช่องทำเครื่องหมายเปิดใช้การวัดคุมการแสดงผลขั้นสูง

ดูวิธีโต้ตอบกับข้อมูลการแสดงผลได้ที่หัวข้อดูเลเยอร์และดูเครื่องมือสร้างโปรไฟล์การแสดงผล

จำลองการเกิดขึ้นพร้อมกันของฮาร์ดแวร์

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

วิธีจำลองการเกิดขึ้นพร้อมกันของฮาร์ดแวร์

1. เปิดเมนูการตั้งค่าการจับภาพ ดูแสดงการตั้งค่าการบันทึก
2. เลือกการเกิดขึ้นพร้อมกันของฮาร์ดแวร์ แล้วกำหนดจำนวนแกนในช่องอินพุต

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

หากต้องการเปลี่ยนกลับเป็นค่าเริ่มต้น 10 ให้คลิกปุ่มเปลี่ยนกลับ

บันทึกไฟล์บันทึกเสียง

หากต้องการบันทึกการบันทึก ให้คลิกขวาและเลือกบันทึกโปรไฟล์

โหลดไฟล์บันทึกเสียง

หากต้องการโหลดการบันทึก ให้คลิกขวาและเลือกโหลดโปรไฟล์

ล้างการบันทึกก่อนหน้า

หลังจากทำการบันทึกแล้ว ให้กดล้างการบันทึก เพื่อล้างการบันทึกนั้นออกจากแผงประสิทธิภาพ

วิเคราะห์การบันทึกประสิทธิภาพ

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

ไปยังส่วนต่างๆ ของการบันทึก

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

เลือกบางส่วนของการบันทึก

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

หากต้องการเลือกบางส่วนของการบันทึก ให้คลิกค้างไว้ จากนั้นลากไปทางซ้ายหรือขวาในภาพรวมไทม์ไลน์

วิธีเลือกบางส่วนโดยใช้แป้นพิมพ์

1. โฟกัสที่แทร็กหลักหรือเพื่อนบ้าน
2. ใช้ปุ่ม W, A, S, D เพื่อซูมเข้า เลื่อนไปทางซ้าย ซูมออก และเลื่อนไปทางขวาตามลำดับ

วิธีเลือกส่วนต่างๆ โดยใช้แทร็กแพด

1. วางเมาส์เหนือส่วนภาพรวมไทม์ไลน์หรือแทร็กใดๆ (หลักและเพื่อนบ้าน)
2. ใช้ 2 นิ้วปัดขึ้นเพื่อซูมออก ปัดไปทางซ้ายเพื่อเลื่อนไปทางซ้าย ปัดลงเพื่อซูมเข้า และ ปัดไปทางขวาเพื่อย้ายไปทางขวา

สร้างเบรดครัมบ์และข้ามไปมาระหว่างระดับการซูม

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

วิธีสร้างและใช้เบรดครัมบ์มีดังนี้

1. ในภาพรวมไทม์ไลน์ ให้เลือกบางส่วนของการบันทึก
2. วางเมาส์เหนือรายการที่เลือกแล้วคลิกปุ่ม zoom_in N มิลลิวินาที โดยการเลือกจะขยายเพื่อเติมภาพรวมของไทม์ไลน์ เชนเบรดครัมบ์จะเริ่มสร้างขึ้นที่ด้านบนของภาพรวมไทม์ไลน์
3. ทำซ้ำ 2 ขั้นตอนก่อนหน้าเพื่อสร้างเบรดครัมบ์ที่ซ้อนกันอีกรายการ คุณยังฝังเบรดครัมบ์ต่อได้ตราบใดที่ช่วงการเลือกมากกว่า 5 มิลลิวินาที
4. หากต้องการข้ามไปยังระดับการซูมที่เลือก ให้คลิกเบรดครัมบ์ที่เกี่ยวข้องในเชนที่ด้านบนของภาพรวมไทม์ไลน์

เลื่อนแผนภูมิขนาดยาว

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

ค้นหากิจกรรม

หากต้องการเปิดช่องค้นหาที่ด้านล่างของแผงประสิทธิภาพ ให้กดแป้นต่อไปนี้

• macOS: Command+F
• Windows, Linux: Control+F

ตัวอย่างนี้แสดงนิพจน์ทั่วไปในช่องค้นหาที่ด้านล่าง ซึ่งจะค้นหากิจกรรมใดๆ ที่ขึ้นต้นด้วย E

วิธีเลื่อนดูกิจกรรมที่ตรงกับคำค้นหา

• คลิกปุ่ม expand_less ก่อนหน้า หรือ expand_less ถัดไป
• กด Shift+Enter เพื่อเลือกก่อนหน้า หรือ Enter เพื่อเลือกรายการถัดไป

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

หากต้องการแก้ไขการตั้งค่าการค้นหา:

• คลิก match_case ตรงตามตัวพิมพ์ใหญ่-เล็ก เพื่อให้คำค้นหาตรงตามตัวพิมพ์ใหญ่-เล็ก
• คลิก regular_expression นิพจน์ทั่วไป เพื่อใช้นิพจน์ทั่วไปในการค้นหาของคุณ

หากต้องการซ่อนช่องค้นหา ให้คลิกยกเลิก

เปลี่ยนลำดับของแทร็กและซ่อนแทร็ก

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

หากต้องการย้ายและซ่อนแทร็ก ให้ทำดังนี้

1. หากต้องการเข้าสู่โหมดการกำหนดค่า ให้คลิกขวาที่ชื่อแทร็กและเลือกกำหนดค่าแทร็ก
2. คลิก arrow_upward ขึ้นหรือลง หรือ arrow_downward ลงเพื่อเลื่อนแทร็กขึ้นหรือลง คลิก visibility_off เพื่อซ่อน
3. เมื่อเสร็จแล้ว ให้คลิกกำหนดค่าแทร็กให้เสร็จสิ้นด้านล่างเพื่อออกจากโหมดการกำหนดค่า

ดูวิดีโอเพื่อดูการทำงานของเวิร์กโฟลว์นี้

แผงประสิทธิภาพจะบันทึกการกำหนดค่าแทร็กสำหรับการติดตามใหม่ แต่ไม่บันทึกในเซสชันเครื่องมือสำหรับนักพัฒนาเว็บครั้งถัดไป

ดูกิจกรรมของเทรดหลัก

ใช้แทร็กหลักเพื่อดูกิจกรรมที่เกิดขึ้นในชุดข้อความหลักของหน้าเว็บ

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

ตัวอย่างนี้แสดงข้อมูลเพิ่มเติมเกี่ยวกับเหตุการณ์การเรียกใช้ฟังก์ชัน get ในแท็บสรุป

ซ่อนฟังก์ชันและองค์ประกอบย่อยในแผนภูมิ Flame Chart

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

1. ในแทร็กหลัก ให้คลิกขวาที่ฟังก์ชันแล้วเลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้ หรือกดแป้นพิมพ์ลัดที่เกี่ยวข้อง

   • ซ่อนฟังก์ชัน (H)
   • ซ่อนรายการย่อย (C)
   • ซ่อนรายการย่อยที่ซ้ำ (R)
   • รีเซ็ตรายการย่อย (U)
   • รีเซ็ตการติดตาม

   

   ปุ่มแบบเลื่อนลง arrow_drop_down จะปรากฏขึ้นข้างชื่อฟังก์ชันที่มีรายการย่อยซ่อนอยู่

2. หากต้องการดูจำนวนรายการย่อยที่ซ่อนอยู่ ให้วางเมาส์เหนือปุ่มแบบเลื่อนลง arrow_drop_down

   

3. หากต้องการรีเซ็ตฟังก์ชันที่มีรายการย่อยซ่อนอยู่หรือแผนภูมิ Flame Chart ให้เลือกฟังก์ชัน แล้วกด U หรือคลิกขวาที่ฟังก์ชันใดก็ได้ แล้วเลือกรีเซ็ตการติดตามตามลำดับ

ละเว้นสคริปต์ในแผนภูมิ Flame

หากต้องการเพิ่มสคริปต์ลงในรายการละเว้น ให้คลิกขวาที่สคริปต์ในแผนภูมิ แล้วเลือกเพิ่มสคริปต์ลงในรายการละเว้น

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

อ่านแผนภูมิเปลวไฟ

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

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

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

ระบบจะไฮไลต์งานที่ใช้เวลานานด้วยรูปสามเหลี่ยมสีแดง และส่วนที่ยาวกว่า 50 มิลลิวินาทีจะแรเงาด้วยสีแดง ดังนี้

ในตัวอย่างนี้ งานใช้เวลานานกว่า 400 มิลลิวินาที ดังนั้น ส่วนที่แสดง 350 มิลลิวินาทีที่ผ่านมาจึงถูกแรเงาเป็นสีแดง ในขณะที่ 50 มิลลิวินาทีเริ่มต้นไม่มีการแรเงา

นอกจากนี้ แทร็กหลักจะแสดงข้อมูลเกี่ยวกับโปรไฟล์ CPU ที่เริ่มต้นและหยุดด้วยฟังก์ชันคอนโซล profile() และ profileEnd()

หากต้องการซ่อนแผนภูมิ Flame Chart ของการเรียก JavaScript โปรดดูปิดใช้ตัวอย่าง JavaScript เมื่อปิดใช้ตัวอย่าง JS คุณจะเห็นเฉพาะเหตุการณ์ระดับสูง เช่น Event (click) และ Function Call

ติดตามผู้เริ่มเหตุการณ์

แทร็กหลักจะแสดงลูกศรที่เชื่อมต่อผู้เริ่มต่อไปนี้และเหตุการณ์ที่เกิดขึ้น

• การไม่ถูกต้องของรูปแบบหรือเลย์เอาต์ -> คำนวณสไตล์ใหม่หรือเลย์เอาต์
• ขอเฟรมภาพเคลื่อนไหว -> เฟรมภาพเคลื่อนไหวเริ่มทำงาน
• ขอ Callback ที่ไม่มีการใช้งาน -> เริ่มการทำงานของ Callback ที่ไม่มีการใช้งาน
• ติดตั้งตัวจับเวลา -> ตัวจับเวลาเริ่มทำงาน
• สร้าง WebSocket -> ส่ง... และรับแฮนด์เชค WebSocket หรือ ทำลาย WebSocket

หากต้องการดูลูกศร ให้ค้นหาผู้เริ่มหรือเหตุการณ์ที่เกิดจากแผนภูมิเปลวไฟและเลือก

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

ดูกิจกรรมในตาราง

หลังจากบันทึกหน้าแล้ว คุณไม่จำเป็นต้องอาศัยแทร็กหลักเพียงอย่างเดียวเพื่อวิเคราะห์กิจกรรม นอกจากนี้ เครื่องมือสำหรับนักพัฒนาเว็บยังนำเสนอมุมมองตาราง 3 แบบสำหรับการวิเคราะห์กิจกรรมอีกด้วย แต่ละมุมมองจะให้มุมมองที่แตกต่างกันไป เกี่ยวกับกิจกรรม

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

เพื่อช่วยให้คุณพบสิ่งที่ต้องการได้เร็วขึ้น ทั้ง 3 แท็บมีปุ่มสำหรับการกรองขั้นสูงถัดจากแถบตัวกรองดังนี้

• match_case ตรงตามตัวพิมพ์ใหญ่-เล็ก
• regular_expression นิพจน์ทั่วไป
• match_word ตรงทั้งคำ

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

คลิกลิงก์เพื่อเปิดไฟล์ต้นฉบับในแผงแหล่งที่มา

หมายเหตุ: 3 ส่วนถัดไปทั้งหมดเป็นการสาธิตเดียวกัน คุณเรียกใช้การสาธิตด้วยตนเองได้ที่การสาธิตแท็บกิจกรรม และดูแหล่งที่มาได้ที่ GoogleChrome/devtools-samples/perf/activitytabs.html

กิจกรรมรูท

ต่อไปนี้เป็นคำอธิบายของแนวคิดกิจกรรมรูทที่กล่าวถึงในแท็บ Call Tree, แท็บ Bottom-Up และบันทึกเหตุการณ์

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

ในแผนภูมิ Flame ของแทร็กหลัก กิจกรรมรูทอยู่ที่ด้านบนสุดของแผนภูมิ ในแท็บแผนผังการโทรและบันทึกเหตุการณ์ กิจกรรมรูทคือรายการระดับบนสุด

ดูแท็บ Call Tree เพื่อดูตัวอย่างกิจกรรมรูท

แท็บแผนผังการโทร

ใช้แท็บ Call Tree เพื่อดูว่ากิจกรรมรูทใดที่ทำให้ได้ผลมากที่สุด

แท็บแผนผังการโทรจะแสดงเฉพาะกิจกรรมในช่วงที่เลือกของการบันทึกเท่านั้น ดูวิธีเลือกส่วนต่างๆ ได้จาก เลือกบางส่วนของไฟล์บันทึกเสียง

ในตัวอย่างนี้ ระดับบนสุดของรายการในคอลัมน์กิจกรรม เช่น Event, Paint และ Composite Layers คือกิจกรรมรูท การวางซ้อนจะแสดงสแต็กการเรียกใช้ ในตัวอย่างนี้ Event ทำให้เกิด Function Call ซึ่งทำให้เกิด button.addEventListener ซึ่งทำให้เกิด b และอื่นๆ

เวลาของตนเองแสดงถึงเวลาที่ใช้ในกิจกรรมนั้นโดยตรง เวลารวม หมายถึงเวลาที่ใช้ในกิจกรรมนั้นหรือกิจกรรมย่อยใดๆ

คลิกเวลาของตนเอง เวลารวม หรือกิจกรรมเพื่อจัดเรียงตารางตามคอลัมน์นั้น

ใช้ช่องตัวกรองเพื่อกรองเหตุการณ์ตามชื่อกิจกรรม

ตามค่าเริ่มต้น เมนูการจัดกลุ่มจะตั้งค่าเป็นไม่มีการจัดกลุ่ม ใช้เมนูการจัดกลุ่มเพื่อจัดเรียงตารางกิจกรรมตามเกณฑ์ต่างๆ

คลิกแสดงสแต็กที่ใช้เวลาดำเนินการสูงสุด เพื่อแสดงอีกตารางหนึ่งทางด้านขวาของตารางกิจกรรม คลิกกิจกรรมเพื่อป้อนข้อมูลในตารางสแต็กที่ใช้เวลาดำเนินการสูงสุด ตารางสแต็กที่ใช้เวลาดำเนินการสูงสุดจะแสดงรายการย่อยของกิจกรรมที่เลือกที่ใช้เวลาดำเนินการนานที่สุด

แท็บด้านล่างสุด

ใช้แท็บล่างขึ้นบนเพื่อดูว่ากิจกรรมใดใช้เวลาโดยรวมมากที่สุด

แท็บล่างขึ้นบนจะแสดงเฉพาะกิจกรรมในช่วงที่เลือกของการบันทึกเท่านั้น ดูวิธีเลือกส่วนต่างๆ ได้จาก เลือกบางส่วนของไฟล์บันทึกเสียง

ในแผนภูมิ Flame Chart ของตัวอย่างนี้ ในแทร็กหลัก คุณจะเห็นได้ว่าเวลาเกือบทั้งหมดใช้ในการเรียกใช้ wait() ทั้ง 3 ครั้ง ด้วยเหตุนี้ กิจกรรมยอดนิยมในแท็บด้านล่างขึ้นจึงเท่ากับ wait ในแผนภูมิแบบ Flame สีเหลืองที่อยู่ด้านล่างการเรียก wait ที่จริงแล้วเป็นการเรียก Minor GC หลายพันครั้ง ด้วยเหตุนี้คุณจึงดูได้ว่าในแท็บล่างขึ้นบน กิจกรรมที่แพงที่สุดรองลงมาคือ Minor GC

คอลัมน์เวลาของตนเองแสดงเวลาโดยรวมที่ใช้ในกิจกรรมนั้นโดยตรงในรายการทั้งหมด

คอลัมน์เวลารวมแสดงเวลารวมที่ใช้ในกิจกรรมนั้นหรือกิจกรรมย่อยใดๆ

แท็บบันทึกเหตุการณ์

ใช้แท็บบันทึกเหตุการณ์เพื่อดูกิจกรรมตามลําดับที่เกิดขึ้นระหว่างการบันทึก

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

คอลัมน์เวลาเริ่มต้นแสดงเวลาที่กิจกรรมดังกล่าวเริ่มต้นขึ้น เมื่อเทียบกับการเริ่มต้นการบันทึก เวลาเริ่มต้นของ 1573.0 ms สำหรับรายการที่เลือกในตัวอย่างนี้หมายความว่ากิจกรรมเริ่มขึ้น 1,573 มิลลิวินาทีหลังจากเริ่มการบันทึก

คอลัมน์เวลาของตัวเองแสดงเวลาที่ใช้งานโดยตรงในกิจกรรมนั้น

คอลัมน์เวลาทั้งหมดแสดงเวลาที่ใช้ในกิจกรรมนั้นโดยตรงหรือในกิจกรรมย่อยใดกิจกรรมหนึ่ง

คลิกเวลาเริ่มต้น เวลาของตนเอง หรือเวลารวมเพื่อจัดเรียงตารางตามคอลัมน์นั้น

ใช้ช่องตัวกรองเพื่อกรองกิจกรรมตามชื่อ

ใช้เมนูระยะเวลาเพื่อกรองกิจกรรมที่ใช้เวลาน้อยกว่า 1 มิลลิวินาทีหรือ 15 มิลลิวินาทีออกไป ตามค่าเริ่มต้น เมนูระยะเวลาจะตั้งค่าเป็นทั้งหมด ซึ่งหมายความว่ากิจกรรมทั้งหมดจะแสดง

ปิดใช้ช่องทำเครื่องหมายการโหลด การเขียนสคริปต์ การแสดงผล หรือการวาดภาพ เพื่อกรองกิจกรรมทั้งหมดออกจากหมวดหมู่เหล่านั้น

ดูช่วงเวลา

ในการติดตามการจับเวลา ให้ดูเครื่องหมายสําคัญต่างๆ เช่น

• การแสดงผลครั้งแรก (FP)
• การแสดงผลเนื้อหาเต็มครั้งแรก (FCP)
• การแสดงผลเนื้อหาขนาดใหญ่ที่สุด (LCP)
• เหตุการณ์ DOMContentLoaded (DCL)
• เหตุการณ์ในการโหลด (L)
• การโทรที่กำหนดเองจาก performance.mark() เครื่องหมายแต่ละรายการที่มีเคล็ดลับเครื่องมือแสดงอยู่ด้านล่างที่ 813.44 มิลลิวินาที ซึ่งมีป้ายกํากับว่ากําลังเริ่มต้นใช้งาน JavaScript
• การโทรที่กำหนดเองจาก performance.measure() ช่วงสีเหลืองจะแสดงด้านล่างโดยมีป้ายกำกับการโต้ตอบช้า

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

ดูการโต้ตอบ

ดูการโต้ตอบของผู้ใช้ในแทร็กการโต้ตอบเพื่อติดตามปัญหาการตอบสนองที่อาจเกิดขึ้น

วิธีดูการโต้ตอบ

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บในหน้าสาธิตนี้ เป็นต้น
2. เปิดแผงประสิทธิภาพและเริ่มการบันทึก
3. คลิกองค์ประกอบ (กาแฟ) และหยุดการบันทึก
4. ค้นหาแทร็กการโต้ตอบในไทม์ไลน์

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

แทร็กการโต้ตอบยังแสดงคำเตือนการโต้ตอบกับ Next Paint (INP) สำหรับการโต้ตอบที่นานกว่า 200 มิลลิวินาทีในแท็บสรุป และในเคล็ดลับเครื่องมือเมื่อวางเมาส์เหนือรายการดังนี้

แทร็กการโต้ตอบจะทำเครื่องหมายการโต้ตอบที่นานกว่า 200 มิลลิวินาทีด้วยรูปสามเหลี่ยมสีแดงที่มุมขวาบน

ดูกิจกรรม GPU

ดูกิจกรรม GPU ในส่วน GPU

ดูกิจกรรมแรสเตอร์

ดูกิจกรรมแรสเตอร์ในส่วนกลุ่มเทรด

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

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

• ใช้ส่วนเฟรมเพื่อดูระยะเวลาที่เฟรมหนึ่งๆ ใช้
• ใช้เครื่องวัด FPS เพื่อประมาณ FPS แบบเรียลไทม์ขณะที่หน้าเว็บทำงาน ดูที่ดูเฟรมต่อวินาทีแบบเรียลไทม์ด้วยเครื่องวัด FPS

ส่วนเฟรม

ส่วนเฟรมจะบอกให้คุณทราบถึงระยะเวลาที่เฟรมหนึ่งๆ ใช้

วางเมาส์เหนือเฟรมเพื่อดูเคล็ดลับเครื่องมือที่มีข้อมูลเพิ่มเติมเกี่ยวกับเฟรมนั้น

ตัวอย่างนี้แสดงเคล็ดลับเครื่องมือเมื่อคุณวางเมาส์เหนือเฟรม

ส่วนเฟรมจะแสดงเฟรมได้ 4 ประเภทดังนี้

1. กรอบไม่มีการใช้งาน (สีขาว) ไม่มีการเปลี่ยนแปลง
2. กรอบ (สีเขียว) แสดงผลตามที่คาดไว้และตรงเวลา
3. เฟรมที่นำเสนอบางส่วน (สีเหลืองที่มีลายเส้นประกว้างเล็กน้อย) Chrome พยายามอย่างเต็มที่ในการแสดงผลการอัปเดตภาพบางส่วนให้ทันเวลา เช่น ในกรณีที่การทำงานของเทรดหลักของกระบวนการแสดงผล (ภาพเคลื่อนไหว Canvas) มาล่าช้า แต่เทรดคอมโพสิต (การเลื่อน) เกิดขึ้นทันเวลา
4. เฟรมตก (สีแดงที่มีลวดลายเส้นทึบหนาแน่น) Chrome แสดงผลเฟรมได้ในระยะเวลาที่สมเหตุสมผลไม่ได้

ตัวอย่างนี้แสดงเคล็ดลับเครื่องมือเมื่อคุณวางเมาส์เหนือเฟรมที่นำเสนอบางส่วน

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

ดูคำขอเครือข่าย

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

คำขอจะมีรหัสสีดังนี้

• HTML: น้ำเงิน
• CSS: ม่วง
• JS: สีเหลือง
• รูปภาพ: สีเขียว

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

สี่เหลี่ยมจัตุรัสสีฟ้าเข้มกว่าที่ด้านซ้ายบนของคำขอหมายความว่าคำขอดังกล่าวเป็นคำขอที่มีลำดับความสำคัญสูงกว่า สี่เหลี่ยมจัตุรัสสีฟ้าอ่อนหมายถึงลำดับความสำคัญต่ำกว่า ในตัวอย่างก่อนหน้านี้ คำขอที่เลือกมีลำดับความสำคัญสูง และคำขอสีน้ำเงินที่อยู่ด้านบนมีลำดับความสำคัญสูงสุด

ส่วนสรุปจะมีช่องลำดับความสำคัญเริ่มต้นและช่องลำดับความสำคัญ (สุดท้าย) หากค่าแตกต่างกัน ลำดับความสำคัญในการดึงข้อมูลของคำขอจะเปลี่ยนไปในระหว่างการบันทึก ดูข้อมูลเพิ่มเติมได้ที่การเพิ่มประสิทธิภาพการโหลดทรัพยากรด้วย Fetch Priority API

ในตัวอย่างก่อนหน้านี้ คำขอสำหรับ www.google.com จะแสดงด้วยเส้นทางด้านซ้าย แถบตรงกลางที่มีส่วนที่มืดและส่วนที่สว่าง และเส้นทางด้านขวา ภาพหน้าจอถัดไปแสดงคำขอเดียวกันที่สอดคล้องกันในแท็บระยะเวลาของแผงเครือข่าย การนำเสนอสองแบบนี้จึงเชื่อมโยงซึ่งกันและกันได้ดังนี้

• บรรทัดด้านซ้ายคือข้อมูลทุกอย่างของกลุ่มเหตุการณ์ Connection Start รวมทั้งหมด หรือพูดอีกอย่างก็คือ ทุกอย่างจะมาก่อน Request Sent เท่านั้น
• ส่วนสว่างของแถบคือ Request Sent และ Waiting (TTFB)
• ส่วนที่มืดของแถบคือ Content Download
• บรรทัดที่ถูกต้องคือเวลาที่ต้องรอเทรดหลัก ซึ่งไม่ได้แสดงในแท็บระยะเวลา

ตัวอย่างนี้แสดงแถบบรรทัดของคำขอ www.google.com

ตัวอย่างนี้แสดงแท็บระยะเวลาของคำขอ www.google.com

ดูเมตริกหน่วยความจำ

เลือกช่องทำเครื่องหมายหน่วยความจำเพื่อดูเมตริกหน่วยความจำจากการบันทึกครั้งล่าสุด

เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงแผนภูมิหน่วยความจำใหม่เหนือแท็บสรุป นอกจากนี้ยังมีแผนภูมิใหม่ใต้แผนภูมิ NET ซึ่งเรียกว่า HEAP ด้วย แผนภูมิ HEAP ให้ข้อมูลเดียวกับเส้น JS ฮีป ในแผนภูมิหน่วยความจำ

ตัวอย่างนี้แสดงเมตริกหน่วยความจำเหนือแท็บสรุป

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

แผนภูมิจะแสดงเฉพาะพื้นที่ของการบันทึกที่เลือกเท่านั้น ในตัวอย่างก่อนหน้านี้ แผนภูมิหน่วยความจำจะแสดงเฉพาะการใช้งานหน่วยความจำสำหรับการเริ่มบันทึก โดยสูงสุดประมาณ 1,000 มิลลิวินาที

ดูระยะเวลาของการบันทึกบางส่วน

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

ในตัวอย่างนี้ การประทับเวลา 488.53ms ที่ด้านล่างของส่วนที่เลือกจะบ่งบอกว่าส่วนนั้นใช้เวลานานเท่าใด

ดูภาพหน้าจอ

โปรดดูจับภาพหน้าจอขณะบันทึกเพื่อเรียนรู้วิธีเปิดใช้ภาพหน้าจอ

วางเมาส์เหนือภาพรวมไทม์ไลน์เพื่อดูภาพหน้าจอของหน้าเว็บขณะที่บันทึก ภาพรวมลำดับเวลาคือส่วนที่มีแผนภูมิ CPU, FPS และ NET

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

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

คลิกภาพขนาดย่อในแท็บสรุปเพื่อซูมเข้าภาพหน้าจอ

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

ดูข้อมูลเลเยอร์

วิธีดูข้อมูลเลเยอร์ขั้นสูงเกี่ยวกับเฟรม

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

วางเมาส์เหนือเลเยอร์เพื่อไฮไลต์ในแผนภาพ

ตัวอย่างนี้แสดงเลเยอร์ #39 ที่มีการไฮไลต์ไว้เมื่อคุณวางเมาส์เหนือเลเยอร์นั้น

วิธีย้ายแผนภาพ

• คลิกโหมดแพน เพื่อเลื่อนไปตามแกน X และ Y
• คลิกโหมดหมุน เพื่อหมุนตามแกน Z
• คลิกรีเซ็ตการเปลี่ยนรูปแบบ เพื่อรีเซ็ตแผนภาพไปยังตำแหน่งเดิม

ดูการวิเคราะห์เลเยอร์ในสถานการณ์จริง

ดูเครื่องมือสร้างโปรไฟล์ของ Paint

หากต้องการดูข้อมูลขั้นสูงเกี่ยวกับเหตุการณ์การแสดงผล ให้ทําดังนี้

1. เปิดใช้การวัดคุมการแสดงผลขั้นสูง
2. เลือกเหตุการณ์ Paint ในแทร็กหลัก

วิเคราะห์ประสิทธิภาพการแสดงผลด้วยแท็บการแสดงผล

ใช้ฟีเจอร์ของแท็บการแสดงผลเพื่อช่วยแสดงภาพประสิทธิภาพในการแสดงผลของหน้าเว็บ

เปิดแท็บการแสดงผล

ดูเฟรมต่อวินาทีแบบเรียลไทม์ด้วยเครื่องวัด FPS

สถิติการแสดงเฟรมคือการวางซ้อนที่ปรากฏที่มุมขวาบนของวิวพอร์ต โดยจะแสดง FPS โดยประมาณแบบเรียลไทม์ขณะที่หน้าเว็บทํางาน

ดูสถิติการแสดงเฟรม

ดูเหตุการณ์ภาพวาดแบบเรียลไทม์ด้วย Paint Flashing

ใช้ Paint Flashing เพื่อดูแบบเรียลไทม์ของเหตุการณ์การวาดภาพทั้งหมดในหน้าเว็บ

ดูการกะพริบของสี

ดูการวางซ้อนของเลเยอร์ด้วยเส้นขอบของเลเยอร์

ใช้เส้นขอบเลเยอร์เพื่อดูการวางซ้อนของเส้นขอบและชิ้นส่วนของเลเยอร์ที่ด้านบนของหน้า

ดูเส้นขอบของเลเยอร์

ค้นหาปัญหาด้านประสิทธิภาพการเลื่อนแบบเรียลไทม์

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

ดูปัญหาเกี่ยวกับประสิทธิภาพการเลื่อน