GORAGOD.com

freelance, web developer, web designer, hosting, domain name

เทคนิคการเร่งความเร็ว CSS ตอนที่ 3

การใช้คำสั่ง CSS ที่ถูกต้องก็มีความสำคัญเช่นกัน เนื่องจาก CSS ที่มีประสิทธิภาพจะทำให้การ Render หน้าเว็บ (แสดงผล) มีความเร็วในการทำงานสูง
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 {
}
0SHAREFacebookLINE it!
^