เทคนิคการเร่งความเร็ว CSS ตอนที่ 3
การใช้คำสั่ง CSS ที่ถูกต้องก็มีความสำคัญเช่นกัน เนื่องจาก CSS ที่มีประสิทธิภาพจะทำให้การ Render หน้าเว็บ (แสดงผล) มีความเร็วในการทำงานสูง
1.ใช้ CSS แบบย่อจะช่วยให้มีการทำงานเร็วกว่า
วิธีด้านล่างคือการเขียนแบบย่อ (Short hand) ซึ่งจะทำให้การประมวลผลเร็วกว่าแบบแรก และ ไฟล์ CSS มีขนาดเล็กกว่าด้วย
2.หลีกเลี่ยงการมี Selector หลายๆชั้น เนื่องการการเขียน CSS ยิ่งมากอันดับก็จะทำให้ Browser ต้องทำการตรวจสอบความถูกต้องของ element ในอันดับที่สูงขึ้นตามกฏ เป็นจำนวนมาก
3.หลีกเลี่ยง การใช้ Universal Selector (*) เนื่องจากมันจะทำให้ CSS มีผลกับทุก Element โดยไม่จำเป็น
หลีกเลี่ยงการกำหนด ชื่อ tag ให้กับ Selector แบบ id
โค้ดด้านบน div ไม่มีความจำเป็นต้องใส่ เนื่องจาก #test เพียงอย่างเดียวก็สามารถกำหนด CSS ไปยัง element ที่ถูกต้องได้แล้ว เนื่องจาก #test จะมีเพียงตัวเดียวในหน้าเว็บ ทำให้เราไม่จำเป้นต้องตรวจสอบอีกว่ามันเป็น div หรือไม่
4.หลีกเลี่ยงการใช้ pseudo-selector เช่น :hover กับ tag ที่ไม่ใช่ลิงค์ เนื่องจากบน IE ที่ต่ำกว่า 8 จะไม่สามารถใช้งาน property นี้ได้
1.ใช้ CSS แบบย่อจะช่วยให้มีการทำงานเร็วกว่า
div {
border-color: red;
border-style: solid;
border-width: 1px;
}
div {
border: 1px solid red;
}
วิธีด้านล่างคือการเขียนแบบย่อ (Short hand) ซึ่งจะทำให้การประมวลผลเร็วกว่าแบบแรก และ ไฟล์ CSS มีขนาดเล็กกว่าด้วย
2.หลีกเลี่ยงการมี Selector หลายๆชั้น เนื่องการการเขียน CSS ยิ่งมากอันดับก็จะทำให้ Browser ต้องทำการตรวจสอบความถูกต้องของ element ในอันดับที่สูงขึ้นตามกฏ เป็นจำนวนมาก
div ul li a {
}
tr > td > a {
}
3.หลีกเลี่ยง การใช้ Universal Selector (*) เนื่องจากมันจะทำให้ CSS มีผลกับทุก Element โดยไม่จำเป็น
* {
}
div > * {
}
หลีกเลี่ยงการกำหนด ชื่อ tag ให้กับ Selector แบบ id
div#test {
}
โค้ดด้านบน div ไม่มีความจำเป็นต้องใส่ เนื่องจาก #test เพียงอย่างเดียวก็สามารถกำหนด CSS ไปยัง element ที่ถูกต้องได้แล้ว เนื่องจาก #test จะมีเพียงตัวเดียวในหน้าเว็บ ทำให้เราไม่จำเป้นต้องตรวจสอบอีกว่ามันเป็น div หรือไม่
4.หลีกเลี่ยงการใช้ pseudo-selector เช่น :hover กับ tag ที่ไม่ใช่ลิงค์ เนื่องจากบน IE ที่ต่ำกว่า 8 จะไม่สามารถใช้งาน property นี้ได้
li:hover {
}