แผงประสิทธิภาพจะทำเครื่องหมายงานที่มีระยะเวลานานแต่ละงานด้วยสามเหลี่ยมสีแดงที่มุมขวาบน และคำเตือนในแท็บสรุป เพื่อระบุว่างานในเทรดหลักใช้เวลานานในการทำงานและทำงานช้า ดังนี้
ในการบันทึกประสิทธิภาพ งานที่ใช้เวลานานบางงานอาจเป็นกิจกรรมคำนวณรูปแบบอีกครั้ง เหตุการณ์คำนวณรูปแบบอีกครั้งจะติดตามระยะเวลาที่เบราว์เซอร์ใช้ในการทำสิ่งต่อไปนี้
- ทำซ้ำผ่านองค์ประกอบ DOM ในหน้าเว็บเพื่อค้นหากฎรูปแบบ CSS ทั้งหมดที่ตรงกับองค์ประกอบที่กำหนด
- คำนวณรูปแบบจริงขององค์ประกอบแต่ละรายการโดยอิงจากกฎรูปแบบ CSS ที่ตรงกัน
คุณต้องคำนวณรูปแบบ CSS ใหม่ทุกครั้งที่ความเกี่ยวข้องของกฎ CSS มีการเปลี่ยนแปลง เช่น ในกรณีต่อไปนี้
- มีการเพิ่มหรือนําองค์ประกอบออกจาก DOM
- แอตทริบิวต์ขององค์ประกอบจะมีการเปลี่ยนแปลง เช่น ค่าของคลาสหรือแอตทริบิวต์ ID
- ผู้ใช้ป้อนข้อมูล เช่น การเลื่อนเมาส์หรือการเปลี่ยนโฟกัสองค์ประกอบ ซึ่งอาจส่งผลต่อกฎ
:hoverรายการ
หากคุณพบเหตุการณ์คำนวณรูปแบบอีกครั้งที่ใช้เวลานาน ให้ใช้แท็บสถิติตัวเลือกเพื่อทำความเข้าใจว่าตัวเลือก CSS ใดใช้เวลามากที่สุดและทำให้ประสิทธิภาพช้าลง
แท็บสถิติตัวเลือกจะแสดงสถิติเกี่ยวกับตัวเลือกกฎ CSS ที่เกี่ยวข้องกับเหตุการณ์คำนวณรูปแบบอีกครั้งอย่างน้อย 1 เหตุการณ์ภายในการบันทึกประสิทธิภาพ
บันทึกการติดตามประสิทธิภาพโดยเปิดใช้สถิติตัวเลือกอยู่
หากต้องการดูสถิติของตัวเลือกกฎ CSS ในระหว่างเหตุการณ์คำนวณรูปแบบอีกครั้งที่ดำเนินมาเป็นเวลานาน ให้บันทึกการติดตามประสิทธิภาพโดยเปิดการตั้งค่าการบันทึกสถิติตัวเลือกไว้
วิธีบันทึกการติดตามประสิทธิภาพด้วยสถิติตัวเลือก
เปิดหน้าเว็บ เช่น หน้าเดโมแกลเลอรีรูปภาพ
เปิดเครื่องมือสำหรับนักพัฒนาเว็บและไปที่แผงประสิทธิภาพ
ในแผงประสิทธิภาพ ให้คลิกปุ่มการตั้งค่า บันทึกการตั้งค่า แล้วเลือกช่องทำเครื่องหมาย เปิดใช้สถิติตัวเลือก CSS
คลิก radio_button_checked บันทึก เรียกใช้สถานการณ์ที่คุณต้องการปรับปรุง แล้วคลิก radio_button_checked หยุด
จากนั้นดูสถิติตัวเลือก CSS ตามที่อธิบายไว้ในส่วนถัดไป
ดูสถิติตัวเลือกกฎ CSS สําหรับเหตุการณ์เดียว
หากต้องการดูสถิติของตัวเลือกกฎ CSS ที่เกี่ยวข้องกับเหตุการณ์คำนวณรูปแบบอีกครั้งรายการเดียว ให้ทำดังนี้
ค้นหาเหตุการณ์คำนวณรูปแบบอีกครั้งในการบันทึกประสิทธิภาพ แล้วคลิกที่กิจกรรมนั้น
เปิดแท็บสถิติตัวเลือกในส่วนด้านล่างของแผงประสิทธิภาพ
ตารางตัวเลือก CSS ในแท็บสถิติตัวเลือก
แท็บสถิติตัวเลือกมีตารางตัวเลือก CSS ตารางจะแสดงข้อมูลต่อไปนี้สำหรับตัวเลือก CSS แต่ละรายการ
| คอลัมน์ | คำอธิบาย |
|---|---|
| ผ่านไปแล้ว (มิลลิวินาที) | ระยะเวลาที่เบราว์เซอร์ใช้ในการจับคู่กับตัวเลือก CSS นี้ โดยจะมีหน่วยเป็นมิลลิวินาที (ms) โดยที่ 1 มิลลิวินาทีคือ 1/1000 ของวินาที |
| การพยายามจับคู่ | จำนวนองค์ประกอบที่เครื่องมือเบราว์เซอร์พยายามจับคู่กับตัวเลือก CSS นี้ |
| จำนวนการจับคู่ | จำนวนองค์ประกอบที่เครื่องมือเบราว์เซอร์จับคู่กับตัวเลือก CSS นี้ |
| % ของค่าที่ไม่ตรงกันของเส้นทางช้า | อัตราส่วนขององค์ประกอบที่ไม่ตรงกับตัวเลือก CSS นี้ต่อองค์ประกอบที่เครื่องมือเบราว์เซอร์พยายามจับคู่ และองค์ประกอบที่กำหนดให้เครื่องมือเบราว์เซอร์ต้องใช้โค้ดที่เพิ่มประสิทธิภาพน้อยกว่าในการจับคู่ |
| ตัวเลือก | ตัวเลือก CSS ที่ตรงกัน |
| Style Sheet | สไตล์ชีต CSS ที่มีตัวเลือก CSS |
เมื่อเสร็จสิ้นแล้ว ให้เปิดการตั้งค่า การตั้งค่าการบันทึก ในแผงประสิทธิภาพ และล้างช่องทำเครื่องหมาย เปิดใช้สถิติตัวเลือก CSS
ดูสถิติตัวเลือกกฎ CSS สำหรับหลายเหตุการณ์
หากต้องการดูสถิติโดยรวมของตัวเลือกกฎ CSS ที่เกี่ยวข้องกับเหตุการณ์คำนวณรูปแบบอีกครั้ง ให้คัดลอกตารางสถิติตัวเลือกหลายรายการลงในสเปรดชีต ดังนี้
ค้นหาเหตุการณ์คำนวณรูปแบบใหม่ที่คุณสนใจเป็นครั้งแรก แล้วคลิกเหตุการณ์นั้น
เปิดแท็บสถิติตัวเลือกในส่วนด้านล่างของแผงประสิทธิภาพ
คลิกขวาที่ตารางสถิติตัวเลือก แล้วเลือกคัดลอกตาราง
วางตารางลงในสเปรดชีต เช่น Google ชีต
ทำซ้ำขั้นตอนก่อนหน้ากับเหตุการณ์คำนวณรูปแบบอีกครั้งที่คุณสนใจ
เมื่อเสร็จสิ้นแล้ว ให้เปิดการตั้งค่า การตั้งค่าการบันทึก ในแผงประสิทธิภาพ และล้างช่องทำเครื่องหมาย เปิดใช้สถิติตัวเลือก CSS
ดูสถิติตัวเลือกกฎ CSS แบบรวมสำหรับการบันทึกทั้งหมด
หากต้องการดูสถิติโดยรวมของตัวเลือกกฎ CSS ที่เกี่ยวข้องกับการบันทึกประสิทธิภาพทั้งหมด ให้ทำดังนี้
คลิกพื้นที่ว่างของแผนภูมิเปลวไฟเพื่อยกเลิกการเลือกเหตุการณ์ที่เลือกไว้
เลือกช่วงการบันทึกทั้งหมด โดยดับเบิลคลิกแผนภูมิ CPU ที่ด้านบนของแผงประสิทธิภาพ
เปิดแท็บสถิติตัวเลือกในส่วนด้านล่างของแผงประสิทธิภาพ คุณจะเห็นแถวใหม่ที่ด้านบนพร้อมข้อมูลเกี่ยวกับผลรวมของตัวเลือกทั้งหมด
เมื่อเสร็จสิ้นแล้ว ให้เปิดการตั้งค่า การตั้งค่าการบันทึก ในแผงประสิทธิภาพ และล้างช่องทำเครื่องหมาย เปิดใช้สถิติตัวเลือก CSS
วิเคราะห์สถิติตัวเลือก CSS
หากต้องการจัดเรียงข้อมูลในตารางสถิติตัวเลือกตามลำดับจากน้อยไปมากหรือมากไปน้อย ให้คลิกส่วนหัวของคอลัมน์ เช่น หากต้องการดูว่าตัวเลือก CSS ใดใช้เวลามากที่สุด ให้คลิกส่วนหัวของคอลัมน์ที่ผ่านไป (มิลลิวินาที)
หากต้องการปรับปรุงประสิทธิภาพของหน้าเว็บ ให้เน้นที่ตัวเลือก CSS ที่มีคุณสมบัติต่อไปนี้
- ใช้เวลานานในการคํานวณ (ค่าเวลาที่ใช้ (มิลลิวินาที) สูง)
- ที่เบราว์เซอร์พยายามจับคู่หลายครั้ง (ค่า Match Attempts สูง)
- เป็นเบราว์เซอร์ที่ไม่ตรงกับองค์ประกอบหลายรายการ (ค่า Match Count ต่ำเมื่อเทียบกับค่า Match Attempts)
- ซึ่งมีเปอร์เซ็นต์สูงของเส้นทางที่ช้าที่ไม่ตรงกัน
เช่น ในภาพหน้าจอก่อนหน้า
- ตัวเลือก CSS แรก (
html body .ps[tooltip...) ต้องใช้เวลามากที่สุด - เครื่องมือเบราว์เซอร์พยายามจับคู่ตัวเลือก CSS นี้ 1, 104 ครั้ง แต่ไม่ตรงกับองค์ประกอบใดๆ
ดังนั้น ตัวเลือก CSS นี้จึงเป็นตัวเลือกแรกที่เราต้องการปรับปรุง
ลองเปลี่ยนตัวเลือก CSS เพื่อให้ประหยัดเวลาในการคำนวณและจับคู่องค์ประกอบในหน้าน้อยลง วิธีปรับปรุงตัวเลือก CSS จะขึ้นอยู่กับกรณีการใช้งานของคุณ
ทำซ้ำขั้นตอนในบทแนะนำนี้เพื่อยืนยันว่าการเปลี่ยนแปลงช่วยลดระยะเวลาของเหตุการณ์คำนวณรูปแบบอีกครั้งในคอลัมน์ที่ผ่านไป (มิลลิวินาที)