แม้ว่าขนาดของไฟล์เว็บเพจที่วัดเป็น K นั้นไม่มีนัยสำคัญจริงๆ สำหรับแบนด์วิธในปัจจุบัน แต่วิธีปรับปรุงไฟล์เว็บเพจที่วัดด้วย K ให้น้อยที่สุดยังคงเป็นปัญหาหนึ่งที่นักออกแบบเว็บไซต์ควรพิจารณา
ดังที่เราทุกคนรู้กันดีว่า ไฟล์หน้าเว็บมีขนาดเล็กลง โดยไม่กระทบต่อโครงสร้างและฟังก์ชันของหน้าเว็บทั้งหมด เพราะไฟล์หน้าเว็บที่มีขนาดเล็กจะช่วยให้เบราว์เซอร์ย่นระยะเวลาการตีความหน้าเว็บได้ และผู้เยี่ยมชมทั่วไปจะไม่มี ที่ต้องเผชิญ อาการระคายเคืองจากการรอให้หน้าเว็บปรากฏช้าจะยิ่งชัดเจนยิ่งขึ้นสำหรับผู้ใช้ที่มีแบนด์วิธต่ำและความเร็วอินเทอร์เน็ตช้า ลองนึกภาพ คุณต้องการให้เว็บไซต์ทั้งหมดปรากฏต่อหน้าคุณทันทีเมื่อคุณเปิดเว็บไซต์หรือไม่? หรือคุณชอบที่จะใช้เวลามากกว่าสิบวินาทีหรือสองสามนาทีในการดูไซต์ทั้งหมดที่ถูกเบราว์เซอร์ตีความทีละนิด
ในยุคของการจัดวางตาราง โค้ดถูกทำซ้ำนับไม่ถ้วนพร้อมกับตารางบนหน้าเว็บ ทำให้ไฟล์หน้าเว็บทั้งหมดบวมมาก การอ่านโค้ดก็ลดลงเหลือน้อยที่สุดด้วย และเวลาในการตีความของเบราว์เซอร์ก็เป็นธรรมชาติ เพิ่มขึ้นมาก เนื่องจากเค้าโครง DIV+CSS เข้ามาแทนที่เค้าโครงตาราง ทุกอย่างได้รับการปรับปรุงอย่างมาก ทำให้ตารางสามารถกลับไปยังตำแหน่งเดิมเพื่อแสดงข้อมูล และเค้าโครงเหลือเพียง DIV+CSS ดังนั้นโค้ด ความสามารถในการอ่านและการนำกลับมาใช้ใหม่ได้รับการปรับปรุง และจุดสำคัญกว่าของ DIV+CSS คือการแยกแยะประสิทธิภาพและโครงสร้างของไฟล์หน้าเว็บ เพื่อให้ไม่จำเป็นต้องเปลี่ยนโครงสร้างของไฟล์หน้าเว็บทั้งหมดเพื่อประสิทธิภาพ
แม้ว่าวิธีเค้าโครง DIV+CSS จะย่อขนาดโค้ดที่ขยายใหญ่ที่สุดในเค้าโครงตารางก่อนหน้าแล้ว แต่สำหรับนักออกแบบเว็บไซต์ วิธีควบคุมขนาดไฟล์หน้าเว็บให้เหลือน้อยที่สุดเป็นคำถามที่คุ้มค่าแก่การสำรวจและดำเนินการอยู่เสมอ
ดูโค้ดต่อไปนี้:
#ส่วนหัว { |
โค้ด CSS ดังกล่าวมีโครงสร้างที่ชัดเจนมาก มีโครงสร้างที่ชัดเจน และอ่านได้ง่ายมาก อย่างไรก็ตาม โค้ดดังกล่าวยังไม่ได้รับการปรับปรุงให้ดีขึ้น ซึ่งหมายความว่าเป็นโค้ด CSS ดั้งเดิมที่สุด มาดูโค้ดแบบง่ายด้านล่างนี้กัน . :
| #ส่วนหัว { ระยะขอบ:10px 15px; พื้นหลัง:#333 url(Images/header.jpg); - |
มีคำว่าแอตทริบิวต์คอมโพสิตใน CSS ซึ่งหมายความว่าสามารถรวมพารามิเตอร์แอตทริบิวต์จำนวนมากเข้าด้วยกันได้ ตัวอย่างเช่น "margin-top; margin-right; margin-bottom; margin-left;" ข้างต้นสามารถรวมเข้าเป็น "margin" " คุณสมบัติ จากนั้นจัดเตรียมพารามิเตอร์ให้
ด้วยวิธีนี้ เราจึงสามารถปรับปรุงโค้ดเพิ่มเติมโดยอิงจากโค้ด CSS ดั้งเดิมได้ นอกจากนี้โครงสร้างที่เขียนในลักษณะนี้ก็สมเหตุสมผลและอ่านง่ายไม่แพ้กัน แต่นี่ยังไม่เพียงพอสำหรับการเพรียวลมจนถึงขีดสุด เพื่อให้โครงสร้างของโค้ด CSS นี้ชัดเจน เราจะใช้ช่องว่าง การขึ้นบรรทัดใหม่ และสิ่งอื่นๆ ที่ใช้พื้นที่
| #header{margin:10px 15px;พื้นหลัง:#333 url(Images/header.jpg);} |