การอ้างอิงเหตุการณ์ในไทม์ไลน์

เมกกิน เคียร์นีย์
Meggin Kearney
ฟลาวิโอ Copes
Flavio Copes

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

พร็อพเพอร์ตี้ทั่วไปของเหตุการณ์ในไทม์ไลน์

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

พร็อพเพอร์ตี้จะแสดงเมื่อใด
เวลารวมสำหรับกิจกรรมที่มีกิจกรรมที่ซ้อนกัน เวลาที่ใช้สำหรับแต่ละหมวดหมู่
สแต็กการเรียกใช้สำหรับเหตุการณ์ที่มีเหตุการณ์ย่อย ระยะเวลาที่ใช้ตามเหตุการณ์แต่ละหมวดหมู่
เวลา CPUระยะเวลาของ CPU ที่กิจกรรมที่บันทึกใช้
รายละเอียดรายละเอียดอื่นๆ เกี่ยวกับกิจกรรม
ระยะเวลา (ตามการประทับเวลา)ระยะเวลาที่ใช้กับเหตุการณ์พร้อมกับบุตรหลานทั้งหมดจนเสร็จสิ้น การประทับเวลาคือเวลาที่เหตุการณ์เกิดขึ้น เมื่อเทียบกับเวลาที่การบันทึกเริ่มต้น
เวลาของกิจกรรมเดียวระยะเวลาของเหตุการณ์ที่ไม่มีบุตรหลาน
ขนาดฮีปที่ใช้ปริมาณหน่วยความจำที่แอปพลิเคชันใช้เมื่อบันทึกเหตุการณ์ และเดลต้า (+/-) มีการเปลี่ยนแปลงขนาดฮีปที่ใช้นับตั้งแต่การสุ่มตัวอย่างครั้งล่าสุด

จำนวนครั้งในการโหลด

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

เหตุการณ์คำอธิบาย
แยกวิเคราะห์ HTMLChrome ได้ดำเนินการอัลกอริทึมการแยกวิเคราะห์ HTML ของตน
เสร็จสิ้นการโหลดคำขอเครือข่ายเสร็จสมบูรณ์
รับข้อมูลได้รับข้อมูลสำหรับคำขอแล้ว จะมีเหตุการณ์ "รับข้อมูล" อย่างน้อย 1 เหตุการณ์
รับคำตอบการตอบสนอง HTTP เริ่มต้นจากคำขอ
ส่งคำขอส่งคำขอเครือข่ายแล้ว

กำลังโหลดพร็อพเพอร์ตี้ของเหตุการณ์

พร็อพเพอร์ตี้คำอธิบาย
ทรัพยากรURL ของทรัพยากรที่ขอ
Previewตัวอย่างแหล่งข้อมูลที่ขอ (ภาพเท่านั้น)
วิธีส่งคำขอเมธอด HTTP ที่ใช้สำหรับคำขอ (เช่น GET หรือ POST)
รหัสสถานะโค้ดตอบกลับ HTTP
ประเภท MIMEประเภท MIME ของทรัพยากรที่ขอ
ความยาวของข้อมูลที่เข้ารหัสความยาวของทรัพยากรที่ขอในหน่วยไบต์

การเขียนสคริปต์เหตุการณ์

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

เหตุการณ์คำอธิบาย
เฟรมของภาพเคลื่อนไหวทำงานเฟรมภาพเคลื่อนไหวที่ตั้งเวลาไว้เริ่มทำงานและมีการเรียกใช้ตัวแฮนเดิลเรียกกลับ
ยกเลิกเฟรมภาพเคลื่อนไหวเฟรมภาพเคลื่อนไหวที่กำหนดเวลาไว้ถูกยกเลิก
เหตุการณ์ GCมีการรวบรวมขยะ
DOMContentLoadedDOMContentLoaded เริ่มทำงานโดยเบราว์เซอร์ เหตุการณ์นี้จะเกิดขึ้นเมื่อมีการโหลดและแยกวิเคราะห์เนื้อหา DOM ทั้งหมดของหน้าเว็บ
ประเมินสคริปต์ได้รับการประเมินสคริปต์แล้ว
เหตุการณ์เหตุการณ์ JavaScript (เช่น "mousedown" หรือ "key")
Function Callมีการเรียกใช้ฟังก์ชัน JavaScript ระดับบนสุด (จะปรากฏขึ้นเมื่อเบราว์เซอร์ป้อนเครื่องมือ JavaScript เท่านั้น)
ติดตั้งตัวจับเวลาระบบจะสร้างตัวจับเวลาด้วย setInterval() หรือ setTimeout()
ส่งคำขอเฟรมภาพเคลื่อนไหวการโทรจาก requestAnimationFrame() ได้กำหนดเวลาเฟรมใหม่
นำตัวจับเวลาออกล้างตัวจับเวลาที่สร้างขึ้นก่อนหน้านี้แล้ว
เวลาสคริปต์ชื่อ console.time()
เวลาสิ้นสุดสคริปต์ชื่อ console.timeEnd()
ตัวจับเวลาเริ่มทำงานตัวจับเวลาที่เริ่มทำงานซึ่งตั้งเวลาด้วย setInterval() หรือ setTimeout()
Ready State Change สำหรับ XHRสถานะพร้อมของ XMLHTTPRequest มีการเปลี่ยนแปลง
การโหลด XHRโหลด XMLHTTPRequest เสร็จแล้ว

พร็อพเพอร์ตี้เหตุการณ์การเขียนสคริปต์

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

เหตุการณ์การแสดงผล

ส่วนนี้จะแสดงเหตุการณ์ที่อยู่ในหมวดหมู่การแสดงผลและพร็อพเพอร์ตี้ของเหตุการณ์

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

คุณสมบัติเหตุการณ์การแสดงผล

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

งานกิจกรรมการวาดภาพ

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

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

พร็อพเพอร์ตี้เหตุการณ์การวาดภาพ

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