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

Kayce Basques

Sofia Emelianova

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

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

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

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

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

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

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

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

   

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

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

ประสิทธิภาพการโหลดระเบียน

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

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

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

   

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

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

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

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

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

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

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

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

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

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

โดยค่าเริ่มต้น แทร็กหลักของไฟล์บันทึกเสียงจะแสดงสแต็กการเรียกใช้ 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. หากต้องการข้ามไปยังระดับการซูมที่เลือก ให้คลิกเบรดครัมบ์ที่เกี่ยวข้องในเชนที่ด้านบนของภาพรวมไทม์ไลน์

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

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

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

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

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

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

วิธีหมุนเวียนกิจกรรมที่ตรงกับคำค้นหา

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

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

วิธีแก้ไขการตั้งค่าการค้นหา

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

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

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

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

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

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

อ่านแผนภูมิ Flame Chart

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

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

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

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

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

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

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

ติดตามตัวเริ่มเหตุการณ์

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

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

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

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

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

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

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

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

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

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

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

กิจกรรมรูท

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

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

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

โปรดดูตัวอย่างกิจกรรมรูทในแท็บ Call Tree

แท็บโครงสร้างการเรียก

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

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

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

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

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

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

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

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

แท็บล่างขึ้นบน

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ดูช่วงเวลา

ในแทร็กการจับเวลา ให้ดูเครื่องหมายที่สำคัญ เช่น

• การแสดงผลครั้งแรก (FP)
• First Contentful Paint (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) ทำงานล่าช้า แต่เทรด Compositor (เลื่อน) ทันเวลา
4. กรอบตก (สีแดงพร้อมด้วยรูปแบบเส้นทึบที่หนาทึบ) Chrome แสดงผลเฟรมในระยะเวลาที่เหมาะสมไม่ได้

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

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

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

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

คำขอจะมีสีกำกับดังนี้

• 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 Heap ในแผนภูมิหน่วยความจำ

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

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

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

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

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

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

ดูภาพหน้าจอ

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

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

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

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

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

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

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

หากต้องการดูข้อมูลเลเยอร์ขั้นสูงเกี่ยวกับเฟรม ให้ทำดังนี้

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

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

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

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

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

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

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

วิธีดูข้อมูลขั้นสูงเกี่ยวกับกิจกรรมการแสดงผล

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

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

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

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

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

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

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

ดูกิจกรรมการวาดภาพแบบเรียลไทม์ด้วยฟีเจอร์แฟลชสี

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

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

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

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

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

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

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

โปรดดูหัวข้อปัญหาด้านประสิทธิภาพในการเลื่อน