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

จากนั้นดูสถิติตัวเลือก CSS ดังที่อธิบายไว้ในส่วนถัดไป

ดูสถิติตัวเลือกกฎ CSS สำหรับกิจกรรมเดียว

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

1. บันทึกการติดตามประสิทธิภาพเมื่อเปิดใช้สถิติตัวเลือก

2. ค้นหาเหตุการณ์คำนวณรูปแบบใหม่ในบันทึกการแสดงและคลิกเหตุการณ์ดังกล่าว

3. ในส่วนล่างของแผงประสิทธิภาพ ให้เปิดแท็บสถิติตัวเลือก

ตารางตัวเลือก CSS ในแท็บสถิติตัวเลือก

แท็บสถิติตัวเลือกมีตารางตัวเลือก CSS ตารางจะแสดงข้อมูลต่อไปนี้สำหรับตัวเลือก CSS แต่ละรายการ

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

ดูสถิติตัวเลือกกฎ CSS สำหรับหลายเหตุการณ์

หากต้องการดูสถิติรวมของตัวเลือกกฎ CSS ที่เกี่ยวข้องกับเหตุการณ์คำนวณรูปแบบใหม่หลายรายการ ให้คัดลอกตารางสถิติตัวเลือกหลายตารางลงในสเปรดชีต ดังนี้

1. บันทึกการติดตามประสิทธิภาพเมื่อเปิดใช้สถิติตัวเลือก

2. ค้นหาเหตุการณ์คำนวณรูปแบบใหม่แรกที่คุณสนใจ แล้วคลิกเหตุการณ์นั้น

3. ในส่วนล่างของแผงประสิทธิภาพ ให้เปิดแท็บสถิติตัวเลือก

4. คลิกขวาที่ตารางสถิติตัวเลือก แล้วเลือกคัดลอกตาราง

   

5. วางตารางลงในสเปรดชีต เช่น Google ชีต

6. ทำซ้ำขั้นตอนก่อนหน้ากับเหตุการณ์คำนวณรูปแบบใหม่อื่นๆ ที่คุณสนใจ

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

ดูสถิติตัวเลือกกฎ CSS รวมสำหรับการบันทึกทั้งหมด

วิธีดูสถิติรวมของตัวเลือกกฎ CSS ที่เกี่ยวข้องกับการบันทึกประสิทธิภาพทั้งหมด

1. บันทึกการติดตามประสิทธิภาพเมื่อเปิดใช้สถิติตัวเลือก

2. คลิกพื้นที่ว่างของแผนภูมิ Flame Chart เพื่อยกเลิกการเลือกเหตุการณ์ที่เลือกไว้

3. เลือกช่วงการบันทึกทั้งหมด โดยดับเบิลคลิกที่แผนภูมิ CPU ที่ด้านบนของแผงประสิทธิภาพ

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

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

วิเคราะห์สถิติตัวเลือก CSS

หากต้องการจัดเรียงข้อมูลในตารางสถิติตัวเลือกตามลำดับจากน้อยไปมากหรือมากไปน้อย ให้คลิกส่วนหัวคอลัมน์ เช่น หากต้องการดูว่าตัวเลือก CSS ใดใช้เวลามากที่สุด ให้คลิกส่วนหัวของคอลัมน์ที่ผ่านไป (ms)

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

• ใช้เวลาคำนวณนาน (ค่าที่ผ่านไป (ms) สูง)
• ที่เบราว์เซอร์พยายามจับคู่หลายครั้ง (ค่าความพยายามในการจับคู่สูง)
• เบราว์เซอร์ที่ไม่ตรงกับองค์ประกอบหลายรายการ (ค่าจำนวนการจับคู่ต่ำเมื่อเทียบกับค่าความพยายามในการจับคู่)
• ซึ่งมีเปอร์เซ็นต์การจับคู่ที่ไม่ตรงกันของเส้นทางที่ช้าสูง

เช่น ในภาพหน้าจอก่อนหน้า

• ตัวเลือก CSS ตัวแรก (html body .ps[tooltip...) จำเป็นต้องใช้มากที่สุด
• เครื่องมือของเบราว์เซอร์พยายามจับคู่ตัวเลือก CSS 1104 นี้ แต่ไม่ตรงกับองค์ประกอบใดๆ

ตัวเลือก CSS นี้จึงเป็นตัวเลือกแรกที่ควรปรับปรุง

ลองเปลี่ยนตัวเลือก CSS เพื่อให้ใช้เวลาน้อยลงในการคำนวณและจับคู่องค์ประกอบในหน้าให้น้อยลง วิธีปรับปรุงตัวเลือก CSS จะขึ้นอยู่กับกรณีการใช้งานของคุณ

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