สรุปประสบการณ์การเขียน CSS บางส่วนที่ฉันได้เรียนรู้ ฟัง ดู และถาม และเขียน CSS ที่มีประสิทธิภาพ - พูดคุยเกี่ยวกับประสิทธิภาพการเรนเดอร์ของ CSS ซึ่งเกี่ยวข้องกับประสิทธิภาพการเรนเดอร์และทรัพยากรที่ใช้ ส่วนหนึ่งเขียนขึ้นตามความเข้าใจของผมเอง ไม่มีการยกเว้นว่าอาจมีข้อผิดพลาดและการละเว้น
1. การจับคู่ตัวเลขและตัวพิมพ์ค่าสีเลขฐานสิบหก
เมื่อเขียนค่าสีเลขฐานสิบหกคุณอาจใช้อักษรตัวพิมพ์เล็กหรือละเว้นให้เป็นตัวเลข 3 หลักได้ ไม่มีข้อมูลที่แน่ชัดที่จะพิสูจน์ว่าวิธีการเขียนนี้มีผลกระทบต่อประสิทธิภาพการเรนเดอร์ของเบราว์เซอร์หรือไม่ แต่เป็นมาตรฐานเริ่มต้นสำหรับค่าสีเลขฐานสิบหก คือ เป็นตัวพิมพ์ใหญ่และตัวเลข 6 หลัก การไม่ต้องการเสี่ยงในสถานการณ์ที่ไม่ทราบจะลดประสิทธิภาพในการเรนเดอร์
* ไม่อนุมัติ - color:#f3a;
* ขอแนะนำให้ใช้ - color:#FF33AA;
2. ความแตกต่างระหว่างการแสดงผลและการมองเห็น
ใช้เพื่อตั้งค่าหรือดึงข้อมูลว่าวัตถุนั้นถูกแสดงหรือไม่ การแสดงวัตถุที่ซ่อนอยู่จะไม่รักษาพื้นที่ทางกายภาพ และการมองเห็นจะรักษาพื้นที่ทางกายภาพที่วัตถุที่ซ่อนอยู่ไว้ เมื่อเบราว์เซอร์แสดงพื้นที่ทางกายภาพที่ถูกครอบครอง ทรัพยากรจะถูกใช้ไป
* เลิกใช้แล้ว - การมองเห็น: ซ่อน;
* ขอแนะนำให้ใช้ - จอแสดงผล:ไม่มี;
3. ความแตกต่างระหว่าง border:none และ border:0;
เช่นเดียวกับความสัมพันธ์ระหว่างการแสดงผลและการมองเห็น พื้นที่ไม่ได้รับการสงวนและสงวนไว้ตามลำดับ ข้อมูลเพิ่มเติมเกี่ยวกับ border:0; แม้ว่าเส้นขอบจะสามารถซ่อนได้ แต่จะยังคงใช้สีเส้นขอบ/รูปแบบเส้นขอบสำหรับคุณ
* ไม่อนุมัติ - เส้นขอบ:0;
* แนะนำให้ใช้ - border:none;
4. ภาพพื้นหลังที่เล็กเกินไปไม่ควรนำมาเรียงต่อกัน
แม้ว่าขนาดไฟล์ของภาพพื้นหลังที่มีความกว้างและความสูง 1px จะเล็กมาก แต่การแสดงแผงที่มีความกว้างและความสูง 500px จะต้องเรียงต่อกันซ้ำ 2,500 ครั้ง การปรับปรุงประสิทธิภาพการแสดงภาพพื้นหลังเกี่ยวข้องกับขนาดและปริมาตรของภาพ ขนาดไฟล์ภาพที่ใหญ่ที่สุดยังคงอยู่ประมาณ 70KB
* ไม่อนุมัติ - เรียงภาพพื้นหลังที่มีความกว้างและความสูงต่ำกว่า 8px
* แนะนำให้ใช้ - ภาพพื้นหลังที่มีขนาดและขนาดปานกลาง
5. ตัวกรอง IE
นอกจากการใช้ทรัพยากรแล้ว ตัวกรองของ IE ยังมีปัญหาความเข้ากันได้อีกด้วย มีตัวกรองที่ทำให้ PNG โปร่งใส คุณสามารถหลีกเลี่ยงการใช้ตัวกรองนี้ได้โดยทำให้ GIF หรือ JPG ดูโปร่งใส ขอแนะนำให้ใช้ความโปร่งใสของ GIF ใน IE6 เท่านั้น เนื่องจาก IE7 ขึ้นไปรองรับความโปร่งใสของ PNG อยู่แล้ว
* การไม่อนุมัติ การใช้ตัวกรอง IE ในทางที่ผิดไม่เพียงแต่ใช้ทรัพยากร แต่ยังทำให้เกิดปัญหาความเข้ากันได้อีกด้วย
* แนะนำควรเลือกวิธีอื่นเพื่อหลีกเลี่ยงการใช้ตัวกรองจะดีที่สุด
6. *{margin:0; padding:0;} เพื่อหลีกเลี่ยงความแตกต่างด้านรูปแบบเบราว์เซอร์
ไวด์การ์ด * เริ่มต้นแท็กทั้งหมด และการแสดงผลของเบราว์เซอร์ใช้ทรัพยากรบางอย่าง แท็กบางแท็กเกือบจะเหมือนกันในเบราว์เซอร์ต่างๆ หรือบางแท็กไม่แนะนำให้ใช้อีกต่อไป (เพราะคุณจะไม่ใช้มัน) แท็กเหล่านี้ไม่ต้องใช้ไวด์การ์ดเพื่อเริ่มต้นใหม่ ซึ่งสามารถประหยัดทรัพยากรบางอย่างได้
* เลิกใช้แล้ว ให้ใช้ * ไวด์การ์ด
* ไม่อนุมัติ ปุ่ม div span b ตารางและแท็กอื่นๆ ควรรวมอยู่ในไวด์การ์ดเพื่อควบคุมสไตล์การเติมภายในและภายนอก
* ขอแนะนำให้เลือกใช้ไวด์การ์ดเพื่อควบคุมสไตล์การเติมภายในและภายนอก
7. อย่าเพิ่มแท็กเพิ่มเติมเพื่ออธิบายคลาสหรือรหัส
หากคุณมีตัวเลือกที่ใช้ id เป็นตัวเลือกคีย์ โปรดอย่าเพิ่มชื่อแท็กเพิ่มเติม เนื่องจากรหัสไม่ซ้ำกัน คุณจึงไม่ควรลดประสิทธิภาพการจับคู่ด้วยเหตุผลที่ไม่มีอยู่จริง
* เลิกใช้แล้ว - button#backButton { }
* เลิกใช้แล้ว - .menu-left #newMenuIcon { }
* แนะนำให้ใช้ - #backButton { }
* แนะนำให้ใช้ - #newMenuIcon { }
8. ลองเลือกคลาสพิเศษที่สุดเพื่อเก็บตัวเลือก
หนึ่งในสาเหตุที่ใหญ่ที่สุดในการลดประสิทธิภาพของระบบคือเราใช้ตัวเลือกมากเกินไปในคลาสแท็ก ด้วยการเพิ่มคลาสให้กับองค์ประกอบ เราสามารถแบ่งย่อยหมวดหมู่ออกเป็นคลาสได้ ดังนั้นเราจึงไม่ต้องเสียเวลาในการจับคู่ตัวเลือกมากเกินไปสำหรับแท็กเดียว
* เลิกใช้แล้ว - treeitem[mailfolder="true"] > treerow > treecell { }
* แนะนำให้ใช้ - .treecell-mailfolder { }
9. หลีกเลี่ยงตัวเลือกที่สืบทอด
ตัวเลือกสืบทอดคือตัวเลือกที่เน้นทรัพยากรมากที่สุดใน CSS มีการใช้ทรัพยากรมากจริงๆ โดยเฉพาะอย่างยิ่งเมื่อตัวเลือกใช้คลาสเลเบลหรือคลาสทั่วไป ในหลายกรณี สิ่งที่เราต้องการจริงๆ คือตัวเลือกย่อย เว้นแต่จะระบุไว้อย่างชัดเจน ห้ามใช้ตัวเลือกสืบทอดใน UI CSS โดยเด็ดขาด
* เลิกใช้แล้ว - treehead treerow treecell { }
* ดีกว่า แต่ก็ยังใช้งานไม่ได้ (ดูบทความถัดไป) - treehead > treerow > treecell { }
10. อย่ารวมตัวเลือกย่อยในคลาสป้ายกำกับ
อย่าใช้ตัวเลือกย่อยในคลาสป้ายกำกับ มิฉะนั้น แต่ละองค์ประกอบที่ปรากฏจะเพิ่มเวลาการจับคู่เพิ่มเติม (โดยเฉพาะอย่างยิ่งหากตัวเลือกดูเหมือนว่าจะตรงกัน)
* เลิกใช้แล้ว - treehead > treerow > treecell { }
* แนะนำให้ใช้ - .treecell-header { }
11. ใส่ใจกับการใช้ตัวเลือกย่อยทั้งหมด
ใช้ตัวเลือกย่อยอย่างระมัดระวัง หากคุณคิดวิธีที่จะไม่ใช้มันได้ก็อย่าใช้มัน โดยเฉพาะอย่างยิ่ง แผนผังและเมนูของ RDF มักใช้ตัวเลือกย่อยเช่นนี้
* เลิกใช้แล้ว - treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { }
โปรดจำไว้ว่าคุณสมบัติ RDF สามารถคัดลอกลงในเทมเพลตได้! เมื่อใช้สิ่งนี้ เราสามารถคัดลอกแอตทริบิวต์ RDF บนองค์ประกอบ XUL ลูกที่เราต้องการเปลี่ยนแปลงตามแอตทริบิวต์นั้น
* แนะนำให้ใช้ - .tree-folderpane-icon[IsImapServer="true"] { }