ความจริงเกี่ยวกับประสิทธิภาพของตัวเลือก CSS

เผยแพร่ซ้ำโดยเพลโต

ผู้ติดตาม: 0

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

แต่ if คุณกำลังมองหาประโยชน์จากด้าน CSS Patrick มีวิธีที่ดีในการหาตัวเลือกที่แพงที่สุดของคุณโดยใช้ Edge DevTools:

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

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

จากที่นี่ คลิกที่หนึ่งในเหตุการณ์สไตล์ที่คำนวณใหม่ในมุมมองน้ำตกหลัก และคุณจะได้รับแท็บ "สถิติตัวเลือก" ใหม่ ดูความเหนอะหนะนั่นสิ!

ความจริงเกี่ยวกับประสิทธิภาพของตัวเลือก CSS PlatoBlockchain Data Intelligence ค้นหาแนวตั้ง AI. — ความจริงเกี่ยวกับประสิทธิภาพของตัวเลือก CSS

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

ข้อมูลเชิงลึกมากมายที่นี่หาก CSS เป็นคอขวดที่ต้องตรวจสอบจริงๆ แต่อ่านโพสต์ฉบับเต็มของ Patrick บน Microsoft Edge Blog เพราะเขาจะลงลึกถึงสาเหตุและความเป็นไป และอธิบายถึงกรณีศึกษาทั้งหมด

ลิงค์ตรง →