หน้านี้เป็นข้อมูลอ้างอิงแบบครอบคลุมเกี่ยวกับฟีเจอร์เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่เกี่ยวข้องกับการวิเคราะห์ประสิทธิภาพ
โปรดดูเริ่มต้นใช้งานการวิเคราะห์ประสิทธิภาพรันไทม์สำหรับบทแนะนำที่แนะนำเกี่ยวกับวิธีวิเคราะห์ประสิทธิภาพของหน้าเว็บโดยใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
บันทึกประสิทธิภาพ
คุณบันทึกรันไทม์หรือประสิทธิภาพในการโหลดได้
บันทึกประสิทธิภาพรันไทม์
บันทึกประสิทธิภาพรันไทม์เมื่อคุณต้องการวิเคราะห์ประสิทธิภาพของหน้าเว็บขณะที่กําลังทํางาน ไม่ใช่การโหลด
- ไปยังหน้าที่ต้องการวิเคราะห์
- คลิกแท็บประสิทธิภาพในเครื่องมือสำหรับนักพัฒนาเว็บ
คลิกบันทึก
โต้ตอบกับหน้าเว็บ เครื่องมือสำหรับนักพัฒนาเว็บจะบันทึกกิจกรรมหน้าเว็บทั้งหมดที่เกิดจากการโต้ตอบของคุณ
คลิกบันทึกอีกครั้ง หรือคลิกหยุดเพื่อหยุดบันทึก
บันทึกประสิทธิภาพการโหลด
บันทึกประสิทธิภาพการโหลดเมื่อคุณต้องการวิเคราะห์ประสิทธิภาพของหน้าเว็บขณะที่โหลด ไม่ใช่การดำเนินการ
- ไปยังหน้าที่ต้องการวิเคราะห์
- เปิดแผงประสิทธิภาพของเครื่องมือสำหรับนักพัฒนาเว็บ
คลิกเริ่มทำโปรไฟล์และโหลดหน้าเว็บซ้ำ
อันดับแรกเครื่องมือสำหรับนักพัฒนาเว็บจะไปที่
about:blank
เพื่อล้างภาพหน้าจอและการติดตามที่เหลืออยู่ จากนั้นเครื่องมือสำหรับนักพัฒนาเว็บจะบันทึกเมตริกประสิทธิภาพขณะที่หน้าเว็บโหลดซ้ำ จากนั้นจะหยุดการบันทึกโดยอัตโนมัติ 2-3 วินาทีหลังจากที่การโหลดเสร็จสิ้น
เครื่องมือสำหรับนักพัฒนาเว็บจะซูมเข้าโดยอัตโนมัติในส่วนการบันทึกที่เกิดกิจกรรมส่วนใหญ่
ในตัวอย่างนี้ แผงประสิทธิภาพจะแสดงกิจกรรมระหว่างการโหลดหน้าเว็บ
จับภาพหน้าจอขณะบันทึก
เปิดใช้ช่องทำเครื่องหมายภาพหน้าจอเพื่อจับภาพหน้าจอของทุกเฟรมขณะบันทึก
โปรดดูที่ดูภาพหน้าจอเพื่อเรียนรู้วิธีโต้ตอบกับภาพหน้าจอ
บังคับเก็บขยะขณะบันทึก
ขณะบันทึกหน้าเว็บ ให้คลิกไ��้ถูพื้นเก็บขยะเพื่อบังคับให้เก็บขยะ
แสดงการตั้งค่าการบันทึก
คลิกการตั้งค่าการบันทึก
เพื่อแสดงการตั้งค่าเพิ่มเติมที่เกี่ยวข้องกับวิธีที่เครื่องมือสำหรับนักพัฒนาเว็บบันทึกการบันทึกประสิทธิภาพ
ปิดใช้ตัวอย่าง JavaScript
โดยค่าเริ่มต้น แทร็กหลักของการบันทึกจะแสดงสแต็ก Call ของฟังก์ชัน JavaScript โดยละเอียดที่มีการเรียกใช้ระหว่างการบันทึก หากต้องการปิดใช้สแต็กการเรียกใช้เหล่านี้ ให้ทำดังนี้
- เปิดเมนูการตั้งค่าการจับภาพ
ดูแสดงการตั้งค่าการบันทึก
- เปิดใช้ช่องทำเครื่องหมายปิดใช้ตัวอย่าง JavaScript
- ถ่ายภาพหน้าที่บันทึกไว้
ภาพหน้าจอต่อไปนี้แสดงความแตกต่างระหว่างการปิดใช้และการเปิดใช้งานตัวอย่าง JavaScript แทร็กหลักของการบันทึกจะสั้นลงมากเมื่อปิดใช้การสุ่มตัวอย่าง เนื่องจากจะละเว้นการเรียกใช้สแต็ก JavaScript ทั้งหมด
ตัวอย่างนี้แสดงการบันทึกที่มีตัวอย่าง JS ที่ปิดใช้
ตัวอย่างนี้แสดงการบันทึกที่มีตัวอย่าง JS ที่เปิดใช้
กดควบคุมเครือข่ายขณะบันทึก
หากต้องการควบคุมการเชื่อมต่อเครือข่ายขณะบันทึก ให้ทำดังนี้
- เปิดเมนูการตั้งค่าการจับภาพ
ดูแสดงการตั้งค่าการบันทึก
- ตั้งค่าเครือข่ายเป็นระดับการควบคุมที่เลือก
ควบคุม CPU ขณะบันทึก
วิธีควบคุมการทำงานของ CPU ขณะบันทึก
- เปิดเมนูการตั้งค่าการจับภาพ
ดูแสดงการตั้งค่าการบันทึก
- ตั้งค่า CPU เป็นระดับการควบคุมที่เลือก
การควบคุมจะสัมพันธ์กับความสามารถของคอมพิวเ��อร์ ตัวอย่างเช่น ตัวเลือกช้าลง 2 เท่าทำให้ CPU ทำงานช้ากว่าความสามารถปกติ 2 เท่า เครื่องมือสำหรับนักพัฒนาเว็บไม่สามารถจำลอง CPU ของอุปกรณ์เคลื่อนที่ได้อย่างแท้จริง เนื่องจากสถาปัตยกรรมของอุปกรณ์เคลื่อนที่นั้นแตกต่างจากเดสก์ท็อปและแล็ปท็อปอย่างมาก
เปิดใช้การวัดคุมการแสดงผลขั้นสูง
วิธีดูการวัดคุมการแสดงผลอย่างละเอียด
- เปิดเมนูการตั้งค่าการจับภาพ
ดูแสดงการตั้งค่าการบันทึก
- เลือกช่องทำเครื่องหมายเปิดใช้การวัดคุมการแสดงผลขั้นสูง
ดูวิธีโต้ตอบกับข้อมูลการแสดงผลได้ที่หัวข้อดูเลเยอร์และดูเครื่องมือสร้างโปรไฟล์การแสดงผล
จำลองการเกิดขึ้นพร้อมกันของฮาร์ดแวร์
หากต้องการทดสอบประสิทธิภาพของแอปพลิเคชันด้วยจำนวนแกนผู้ประมวลผลข้อมูล คุณสามารถกำหนดค่าที่พร็อพเพอร์ตี้ navigator.hardwareConcurrency
รายงานได้ แอปพลิเคชันบางรายการใช้พร็อพเพอร์ตี้นี้เพื่อควบคุมระดับการทำงานพร้อมกันของแอปพลิเคชัน เช่น เพื่อควบคุมขนาดกลุ่ม pthread ของ Emscripten
วิธีจำลองการเกิดขึ้นพร้อมกันของฮาร์ดแวร์
- เปิดเมนูการตั้งค่าการจับภาพ
ดูแสดงการตั้งค่าการบันทึก
- เลือกการเกิดขึ้นพร้อมกันของฮาร์ดแวร์ แล้วกำหนดจำนวนแกนในช่องอินพุต
เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงไอคอนคำเตือน ข้างแท็บประสิทธิภาพเพื่อช่วยเตือนว่ามีการเปิดใช้การจำลองการเกิดขึ้นพร้อมกันของฮาร์ดแวร์
หากต้องการเปลี่ยนกลับเป็นค่าเริ่มต้น 10
ให้คลิกปุ่มเปลี่ยนกลับ
บันทึกไฟล์บันทึกเสียง
หากต้องการบันทึกการบันทึก ให้คลิกขวาและเลือกบันทึกโปรไฟล์
โหลดไฟล์บันทึกเสียง
หากต้องการโหลดการบันทึก ให้คลิกขวาและเลือกโหลดโปรไฟล์
ล้างการบันทึกก่อนหน้า
หลังจากทำการบันทึกแล้ว ให้กดล้างการบันทึก
เพื่อล้างการบันทึกนั้นออกจากแผงประสิทธิภาพ
วิเคราะห์การบันทึกประสิทธิภาพ
หลังจากที่คุณบันทึกประสิทธิภาพรันไทม์หรือประสิทธิภาพการโหลดบันทึกแล้ว แผงประสิทธิภาพจะให้ข้อมูลจำนวนมากสำหรับการวิเคราะห์ประสิทธิภาพของสิ่งที่เกิดขึ้น
ไปยังส่วนต่างๆ ของการบันทึก
ในการตรวจสอบการบันทึกประสิทธิภาพอย่างละเอียด คุณสามารถเลือกบางส่วนของการบันทึก เลื่อนแผนภูมิขนาดยาวเปลวไฟ ซูมเข้าและออก และใช้เบรดครัมบ์เพื่อข้ามไปมาระหว่างระดับการซูม
เลือกบางส่วนของการบันทึก
ใต้แถบการดำเนินการของแผงประสิทธิภาพและที่ด้านบนของการบันทึก คุณจะเห็นส่วนภาพรวมไทม์ไลน์ที่มีแผนภูมิ CPU และ NET
หากต้องการเลือกบางส่วนของการบันทึก ให้คลิกค้างไว้ จากนั้นลากไปทางซ้ายหรือขวาในภาพรวมไทม์ไลน์
วิธีเลือกบางส่วนโดยใช้แป้นพิมพ์
- โฟกัสที่แทร็กหลั��หรือเพื่อนบ้าน
- ใช้ปุ่ม W, A, S, D เพื่อซูมเข้า เลื่อนไปทางซ้าย ซูมออก และเลื่อนไปทางขวาตามลำดับ
วิธีเลือกส่วนต่างๆ โดยใช้แทร็กแพด
- วางเมาส์เหนือส่วนภาพรวมไทม์ไลน์หรือแทร็กใดๆ (หลักและเพื่อนบ้าน)
- ใช้ 2 นิ้วปัดขึ้นเพื่อซูมออก ปัดไปทางซ้ายเพื่อเลื่อนไปทางซ้าย ปัดลงเพื่อซูมเข้า และ ปัดไปทางขวาเพื่อย้ายไปทางขวา
สร้างเบรดครัมบ์และข้ามไปมาระหว่างระดับการซูม
ภาพรวมไทม์ไลน์ช่วยให้คุณสร้างเบรดครัมบ์ที่ซ้อนกันหลายรายการได้ต่อเนื่องกัน เพิ่มระดับการซูม แล้วข้ามไปยังระดับที่เลือก
วิธีสร้างและใช้เบรดครัมบ์มีดังนี้
- ในภาพรวมไทม์ไลน์ ให้เลือกบางส่วนของการบันทึก
- วางเมาส์เหนือรายการที่เลือกแล้วคลิกปุ่ม zoom_in N มิลลิวินาที โดยการเลือกจะขยายเพื่อเติมภาพรวมของไทม์ไลน์ เชนเบรดครัมบ์จะเริ่มสร้างขึ้นที่ด้านบนของภาพรวมไทม์ไลน์
- ทำซ้ำ 2 ขั้นตอนก่อนหน้าเพื่อสร้างเบรดครัมบ์ที่ซ้อนกันอีกรายการ คุณยังฝังเบรดครัมบ์ต่อได้ตราบใดที่ช่วงการเลือกมากกว่า 5 มิลลิวินาที
- หากต้องการข้ามไปยังระดับการซูมที่เลือก ให้คลิกเบรดครัมบ์ที่เกี่ยวข้องในเชนที่ด้านบนของภาพรวมไทม์ไลน์
เลื่อนแผนภูมิขนาดยาว
หากต้องการเลื่อนแผนภูมิ Flave แบบยาวในแทร็กหลักหรือเพื่อนบ้าน ให้คลิกค้างไว้แล้วลากไปในทิศทางใดก็ได้จนกว่าสิ่งที่คุณกำลังมองหาจะปรากฏขึ้น
ค้นหากิจกรรม
หากต้องการเปิดช่องค้นหาที่ด้านล่างของแผงประสิทธิภาพ ให้กดแป้นต่อไปนี้
- macOS: Command+F
- Windows, Linux: Control+F
ตัวอย่างนี้แสดงนิ��������ท���������ปในช่องค้นหาที่ด้านล่าง ซึ่งจะค้นหากิจกรรมใดๆ ที่ขึ้นต้นด้วย E
วิธีเลื่อนดูกิจกรรมที่ตรงกับคำค้นหา
- คลิกปุ่ม expand_less ก่อนหน้า หรือ expand_less ถัดไป
- กด Shift+Enter เพื่อเลือกก่อนหน้า หรือ Enter เพื่อเลือกรายการถัดไป
แผงประสิทธิภาพจะแสดงเคล็ดลับเครื่องมือเหนือกิจกรรมที่เลือกในช่องค้นหา
หากต้องการแก้ไขการตั้งค่าการค้นหา:
- คลิก match_case ตรงตามตัวพิมพ์ใหญ่-เล็ก เพื่อให้คำค้นหาตรงตามตัวพิมพ์ใหญ่-เล็ก
- คลิก regular_expression นิพจน์ทั่วไป เพื่อใช้นิพจน์ทั่วไปในการค้นหาของคุณ
หากต้องการซ่อนช่องค้นหา ให้คลิกยกเลิก
เปลี่ยนลำดับของแทร็กและซ่อนแทร็ก
คุณสามารถเปลี่ยนลำดับของแทร็กและซ่อนแทร็กที่ไม่เกี่ยวข้องในโหมดการกำหนดค่าแทร็กได้เพื่อจัดระเบียบการติดตามประสิทธิภาพ
หากต้องการย้ายและซ่อนแทร็ก ให้ทำดังนี้
- หากต้องการเข้าสู่โหมดการกำหนดค่า ให้คลิกขวาที่ชื่อแทร็กและเลือกกำหนดค่าแทร็ก
- คลิก arrow_upward ขึ้นหรือลง หรือ arrow_downward ลงเพื่อเลื่อนแทร็กขึ้นหรือลง คลิก visibility_off เพื่อซ่อน
- เมื่อเสร็จแล้ว ให้คลิกกำหนดค่าแทร็กให้เสร็จสิ้นด้านล่างเพื่อออกจากโหมดการกำหนดค่า
ดูวิดีโอเพื่อดูการทำงานของเวิร์กโฟลว์นี้
แผงประสิทธิภาพจะบันทึกการกำหนดค่าแทร็กสำหรับการติดตามใหม่ แต่ไม่บันทึกในเซสชันเครื่องมือสำหรับนักพัฒนาเว็บครั้งถัดไป
ดูกิจกรรมของเทรดหลัก
ใช้แทร็กหลักเพื่อดูกิจกรรมที่เกิดขึ้นในชุดข้อความหลักของหน้าเว็บ
คลิกกิจกรรมเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับกิจกรรมนั้นในแท็บสรุป แผงประสิทธิภาพจะสรุปเหตุการณ์ที่เลือกเป็นสีน้ำเงิน
ตัวอย่างนี้แสดงข้อมูลเพิ่มเติมเกี่ยวกับเหตุการณ์การเรียกใช้ฟังก์ชัน get
ในแท็บสรุป
อ่านแผนภูมิเปลวไฟ
แผงประสิทธิภาพจะแสดงกิจกรรมของชุดข้อความหลักในแผนภูมิ 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
หากต้องการดูลูกศร ให้ค้นหาผู้เริ่มหรือเหตุการณ์ที่เกิดจากแผนภูมิเปลวไฟและเลือก
เมื่อเลือกแล้ว แท็บสรุปจะแสดงลิงก์ตัวเริ่มสำหรับลิงก์สำหรับผู้เริ่มต้น และลิงก์เริ่มโดยสำหรับเหตุการณ์ที่เกิดขึ้น คลิกเพื่อสลับระหว่างเหตุการณ์ที่เกี่ยวข้อง
ซ่อนฟังก์ชันและองค์ประกอบย่อยในแผนภูมิ Flame Chart
หากต้องการจัดระเบียบแผนภูมิ Flame ในชุดข้อความหลัก คุณจะซ่อนฟังก์ชันที่เลือกหรือรายการย่อยได้โดยทำดังนี้
ในแทร็กหลัก ให้คลิกขวาที่��ังก์ชันแล้วเลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้ หรือกดแป้นพิมพ์ลัดที่เกี่ยวข้อง
- ซ่อนฟังก์ชัน (
H
) - ซ่อนรายการย่อย (
C
) - ซ่อนรายการย่อยที่ซ้ำ (
R
) - รีเซ็ตรายการย่อย (
U
) - รีเซ็ตการติดตาม (
T
) - เพิ่มสคริปต์ลงในรายการละเว้น (
I
)
ปุ่มแบบเลื่อนลง arrow_drop_down จะปรากฏขึ้นข้างชื่อฟังก์ชันที่มีรายการย่อยซ่อนอยู่
- ซ่อนฟังก์ชัน (
หากต้องการดูจำนวนรายการย่อยที่ซ่อนอยู่ ให้วางเมาส์เหนือปุ่มแบบเลื่อนลง arrow_drop_down
หากต้องการรีเซ็ตฟังก์ชันที่มีรายการย่อยซ่อนอยู่หรือแผนภูมิ Flame Chart ให้เลือกฟังก์ชัน แล้วกด
U
หรือคลิกขวาที่ฟังก์ชันใดก็ได้ แล้วเลือกรีเซ็ตการติดตามตามลำดับ
ละเว้นสคริปต์ในแผนภูมิ Flame
หากต้องการเพิ่มสคริปต์ลงในรายการละเว้น ให้คลิกขวาที่สคริปต์ในแผนภูมิ แล้วเลือกเพิ่มสคริปต์ลงในรายการละเว้น
แผนภูมิจะยุบสคริปต์ที่ละเว้น โดยทำเครื่องหมายเป็นในรายการละเว้น และเพิ่มสคริปต์ลงในกฎของการยกเว้นที่กำหนดเองในการตั้งค่า การตั้งค่า > รายการละเว้น ระบบจะบันทึกสคริปต์ที่ละเว้นไว้จนกว่าคุณจะนำออกจากการติดตามหรือกฎการยกเว้นที่กำหนดเอง
ดูกิจกรรมในตาราง
หลังจากบันทึกหน้าแล้ว คุณไม่จำเป็นต้องอาศัยแทร็กหลักเพียงอย่างเด��ยวเพื่อวิเคราะห์กิจกรรม นอกจากนี้ เครื่องมือสำหรับนักพัฒนาเว็บยังนำเสนอมุมมองตาราง 3 แบบสำหรับการวิเคราะห์กิจกรรมอีกด้วย แต่ละมุมมองจะให้มุมมองที่แตกต่างกันไป เกี่ยวกับกิจกรรม
- เมื่อต้องการดูกิจกรรมรากที่ทำให้เกิดงานมากที่สุด ให้ใช้แท็บโครงสร้างการเรียก
- เมื่อต้องการดูกิจกรรมที่มีการใช้เวลามากที่สุดโดยตรง ให้ใช้แท็บด้านล่าง
- เมื่อต้องการดูกิจกรรมตามลำดับที่เกิดขึ้นระหว่างการบันทึก ให้ใช้แท็บบันทึกเหตุการณ์
เพื่อช่วยให้คุณพบสิ่งที่ต้องการได้เร็วขึ้น ทั้ง 3 แท็บมีปุ่มสำหรับการกรองขั้นสูงถัดจากแถบตัวกรองดังนี้
- match_case ตรงตามตัวพิมพ์ใหญ่-เล็ก
- regular_expression นิพจน์ทั่วไป
- match_word ตรงทั้งคำ
มุมมองตารางแต่ละรายการในแผงประสิทธิภาพจะแสดงลิงก์สำหรับกิจกรรมต่างๆ เช่น การเรียกใช้ฟังก์ชัน เครื่องมือสำหรับนักพัฒนาเว็บจะค้นหาการประกาศฟังก์ชันที่เกี่ยวข้องในไฟล์ต้นทางเพื่อช่วยคุณแก้ไขข้อบกพร่อง นอกจากนี้ หากมีการแมปแหล่งที่มาที่เหมาะสมเปิดอยู่ เครื่องมือสำหรับนักพัฒนาเว็บจะค้นหาไฟล์ต้นฉบับโดยอัตโนมัติ
คลิกลิงก์เพื่อเปิดไฟล์ต้นฉบับในแผงแหล่งที่มา
กิจกรรมรูท
ต่อไปนี้เป็นคำอธิบายของแนวคิดกิจกรรมรูทที่กล่าวถึงในแท็บ 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()
ช่วงสีเหลืองจะแสดงด้านล่างโดยมีป้ายกำกับการโต้ตอบช้า
หากต้องการดูรายละเอียดเพ��่มเติมในแท็บสรุป ให้เลือกเครื่องหมาย หากต้องการดูการประทับเวลาของเครื่องหมาย ให้วางเมาส์เหนือเครื่องหมายนั้นบนแทร็กการจับเวลา
ดูการโต้ตอบ
ดูการโต้ตอบของผู้ใช้ในแทร็กการโต้ตอบเพื่อติดตามปัญหาการตอบสนองที่อาจเกิดขึ้น
วิธีดูการโต้ตอบ
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บในหน้าสาธิตนี้ เป็นต้น
- เปิดแผงประสิทธิภาพและเริ่มการบันทึก
- คลิกองค์ประกอบ (กาแฟ) และหยุดการบันทึก
- ค้นหาแทร็กการโต้ตอบในไทม์ไลน์
ในตัวอย่างนี้ แทร็กการโต้ตอบจะแสดงการโต้ตอบของตัวชี้ การโต้ตอบจะมีเครื่องหมายหนวดที่บ่งชี้ถึงความล่าช้าในการป้อนข้อมูลและการนำเสนอ ณ ขอบเขตเวลาในการประมวลผล วางเมาส์เหนือการโต้ตอบเพื่อดูเคล็ดลับเครื่องมือที่มีข้อมูลล่าช้า เวลาในการประมวลผล และการหน่วงเวลาการนำเสนอ
แทร็กการโต้ตอบยังแสดงคำเตือนการโต้ตอบกับ Next Paint (INP) สำหรับการโต้ตอบที่นานกว่า 200 มิลลิวินาทีในแท็บสรุป และในเคล็ดลับเครื่องมือเมื่อวางเมาส์เหนือรายการดังนี้
แทร็กการโต้ตอบจะทำเครื่องหมายการโต้ตอบที่นานกว่า 200 มิลลิวินาทีด้วยรูปสามเหลี่ยมสีแดงที่มุมขวาบน
ดูกิจกรรม GPU
ดูกิจกรรม GPU ในส่วน GPU
ดูกิจกรรมแรสเตอร์
ดูกิจกรรมแรสเตอร์ในส่วนกลุ่มเทรด
วิเคราะห์เฟรมต่อวินาที (FPS)
เครื่องมือสำหรับนักพัฒนาเว็บมีวิธีการวิเคราะห์เฟรมต่อวินาทีหลายวิธี ดังนี้
- ใช้ส่วนเฟรมเพื่อดูระยะเวลาที่เฟรมหนึ่งๆ ใช้
- ใช้เครื่องวัด FPS เพื่อประมาณ FPS แบบเรียลไทม์ขณะที่หน้าเว็บทำงาน ดูที่ดูเฟรมต่อวินาทีแบบเรียลไทม์ด้วยเครื่องวัด FPS
ส่วนเฟรม
ส่วนเฟรมจะบอกให้คุณทราบถึงระยะเวลาที่เฟรมหนึ่งๆ ใช้
วางเมาส์เหนือเฟรมเพื่อดูเคล็ดลับเครื่องมือที่มีข้อมูลเพิ่มเติมเกี่ยวกับเฟรมนั้น
ตัวอย่างนี้แสดงเคล็ดลับเครื่องมือเมื่อคุณวางเมาส์เหนือเฟรม
ส่วนเฟรมจะแสดงเฟรมได้ 4 ประเภทดังนี้
- กรอบไม่มีการใช้งาน (สีขาว) ไม่มีการเปลี่ยนแปลง
- กรอบ (สีเขียว) แสดงผลตามที่คาดไว้และตรงเวลา
- เฟรมที่นำเสนอบางส่วน (สีเหลืองที่มีลายเส้นประกว้างเล็กน้อย) Chrome พยายามอย่างเต็มที่ในการแสดงผลการอัปเดตภาพบางส่วนให้ทันเวลา เช่น ในกรณีที่การทำงานของเทรดหลักของกระบวนการแสดงผล (ภาพเคลื่อนไหว Canvas) มาล่าช้า แต่เทรดคอมโพสิต (การเลื่อน) เกิดขึ้นทันเวลา
- เฟรมตก (สีแดงที่มีลวดลายเส้นทึบหนาแน่น) 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
ในแท็บสรุปเมื่อคุณคลิกในส่วนเฟรม
คลิกภาพขนาดย่อในแท็บสรุปเพื่อซูมเข้าภาพหน้าจอ
ตัวอย่างนี้แสดงภาพหน้าจอแบบซูมเข้าหลังจากที่คุณคลิกภาพขนาดย่อในแท็บสรุป
ดูข้อมูลเลเยอร์
วิธีดูข้อมูลเลเยอร์ขั้นสูงเกี่ยวกับเฟรม
- เปิดใช้การวัดคุมการแสดงผลขั้นสูง
- เลือกเฟรมในส่วนเฟรม เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงข้อมูลเกี่ยวกับเลเยอร์ในแท็บเลเยอร์ใหม่ ถัดจากแท็บบันทึกเหตุการณ์
วางเมาส์เหนือเลเยอร์เพื่อไฮไลต์ในแผนภาพ
ตัวอย่างนี้แสดงเลเยอร์ #39 ที่มีการไฮไลต์ไว้เมื่อคุณวางเมาส์เหนือเลเยอร์นั้น
วิธีย้ายแผนภาพ
- คลิกโหมดแพน
เพื่อเลื่อนไปตามแกน X และ Y
- คลิกโหมดหมุน
เพื่อหมุนตามแกน Z
- คลิกรีเซ็ตการเปลี่ยนรูปแบบ
เพื่อรีเซ็ตแผนภาพไปยังตำแหน่งเดิม
ดูการวิเคราะห์เลเยอร์ในสถานการณ์จริง
ดูเครื่องมือสร้างโปรไฟล์ของ Paint
หากต้องการดูข้อมูลขั้นสูงเกี่ยวกับเหตุการณ์การแสดงผล ให้ทําดังนี้
- เปิดใช้การวัดคุมการแสดงผลขั้นสูง
- เลือกเหตุการณ์ Paint ในแทร็กหลัก
วิเคราะห์ประสิทธิภาพการแสดงผลด้วยแท็บการแสดงผล
ใช้ฟีเจอร์ของแท็บการแสดงผลเพื่อช่วยแสดงภาพประสิทธิภาพในการแสดงผลของหน้าเว็บ
ดูเฟรมต่อวินาทีแบบเรียลไทม์ด้วยเครื่องวัด FPS
สถิติการแสดงเฟรมคือการวางซ้อนที่ปรากฏที่มุมขวาบนของวิวพอร์ต โดยจะแสดง FPS โดยประมาณแบบเรียลไทม์ขณะที่หน้าเว็บทํางาน
ดูเหตุการณ์ภาพวาดแบบเรียลไทม์ด้วย Paint Flashing
ใช้ Paint Flashing เพื่อดูแบบเรียลไทม์ของเหตุการณ์การวาดภาพทั้งหมดในหน้าเว็บ
ดูการวางซ้อนของเลเยอร์ด้วยเส้นขอบของเลเยอร์
ใช้เส้นขอบเลเยอร์เพื่อดูการวางซ้อนของเส้นขอบและชิ้นส่วนของเลเยอร์ที่ด้านบนของหน้า
ค้นหาปัญหาด้านประสิทธิภาพการเลื่อนแบบเรียลไทม์
ใช้ปัญหาเกี่ยวกับประสิทธิภาพการเลื่อนเพื่อระบุองค์ประกอบของหน้าที่มี Listener เหตุการณ์ซึ่งเกี่ยวข้องกับการเลื่อนซึ่งอาจเป็นอันตรายต่อประสิทธิภาพของหน้า เครื่องมือสำหรับนักพัฒนาเว็บจะสรุปองค์ประกอบ ที่มีแนวโน้มว่าจะเป็นปัญหาสีทีล