Published: March 31, 2014
โดยค่าเริ่มต้น ระบบจะถือว่า CSS เป็นทรัพยากรที่บล็อกการแสดงผล ซึ่งหมายความว่าเบราว์เซอร์จะไม่แสดงผลเนื้อหาที่ประมวลผลแล้วจนกว่าจะสร้าง CSSOM เสร็จ โปรดตรวจสอบว่า CSS มีขนาดเล็ก แสดงผล CSS ให้เร็วที่สุด และใช้ประเภทสื่อและคำค้นหาสื่อเพื่อยกเลิกการบล็อกการแสดงผล
ในส่วนการสร้างแผนผังการแสดงผล เราเห็นว่าเส้นทางการแสดงผลที่สำคัญต้องใช้ทั้ง DOM และ CSSOM เพื่อสร้างแผนผังการแสดงผล ซึ่งส่งผลต่อประสิทธิภาพการทำงานที่สำคัญ นั่นคือ ทั้ง HTML และ CSS เป็นทรัพยากรที่บล็อกการแสดงผล HTML นั้นชัดเจนอยู่แล้ว เนื่องจากหากไม่มี DOM เราก็ไม่มีอะไรให้แสดงผล แต่ข้อกำหนด CSS อาจไม่ชัดเจนนัก จะเกิดอะไรขึ้นหากเราพยายามแสดงผลหน้าเว็บทั่วไปโดยไม่บล็อกการแสดงผล CSS
สรุป
- โดยค่าเริ่มต้น ระบบจะถือว่า CSS เป็นทรัพยากรที่บล็อกการแสดงผล
- ประเภทสื่อและคำค้นหาสื่อช่วยให้เราสามารถทำเครื่องหมายทรัพยากร CSS บางรายการเป็นทรัพยากรที่ไม่บล็อกการแสดงผล
- เบราว์เซอร์จะดาวน์โหลดทรัพยากร CSS ทั้งหมด ไม่ว่าจะมีลักษณะการทำงานแบบบล็อกหรือไม่บล็อกก็ตาม
ตัวอย่างก่อนหน้านี้ที่แสดงเว็บไซต์ของ The New York Times ที่มีและไม่มี CSS แสดงให้เห็นว่าเหตุใดการแสดงผลจึงถูกบล็อกจนกว่า CSS จะพร้อมใช้งาน เนื่องจากหากไม่มี CSS หน้าเว็บจะใช้งานไม่ได้ ประสบการณ์การใช้งานทางด้านขวามักเรียกว่า Flash of Unstyled Content (FOUC) เบราว์เซอร์จะบล็อกการแสดงผลจนกว่าจะมีทั้ง DOM และ CSSOM
CSS เป็นทรัพยากรที่บล็อกการแสดงผล ส่ง CSS ไปยังไคลเอ็นต์ให้เร็วที่สุดเพื่อเพิ่มประสิทธิภาพเวลาในการแสดงผลครั้งแรก
อย่างไรก็ตาม จะเกิดอะไรขึ้นหากเรามีสไตล์ CSS บางอย่างที่ใช้ในบางเงื่อนไขเท่านั้น เช่น เมื่อมีการพิมพ์หน้าเว็บหรือแสดงหน้าเว็บบนจอภาพขนาดใหญ่ คงจะดีไม่น้อยหากเราไม่ต้องบล็อกการแสดงผลทรัพยากรเหล่านี้
"ประเภทสื่อ" และ "คำค้นหาสื่อ" ของ CSS ช่วยให้เราจัดการกับกรณีการใช้งานเหล่านี้ได้
<link href="style.css" rel="stylesheet" />
<link href="print.css" rel="stylesheet" media="print" />
<link href="other.css" rel="stylesheet" media="(min-width: 40em)" />
คำค้นหาสื่อประกอบด้วยประเภทสื่อและนิพจน์ตั้งแต่ 0 รายการขึ้นไปที่ตรวจสอบเงื่อนไขของฟีเจอร์สื่อที่เฉพาะเจาะจง ตัวอย่างเช่น การประกาศสไตล์ชีตแรกของเราไม่ได้ระบุประเภทสื่อหรือคำค้นหาสื่อ ดังนั้นจึงใช้ได้ในทุกกรณี ซึ่งหมายความว่าการประกาศนี้จะบล็อกการแสดงผลเสมอ ในทางกลับกัน การประกาศสไตล์ชีตที่ 2 จะใช้เมื่อมีการพิมพ์เนื้อหาเท่านั้น ซึ่งอาจเป็นเพราะคุณต้องการจัดเรียงเลย์เอาต์ใหม่ เปลี่ยนแบบอักษร และพิจารณาการออกแบบที่สำคัญอื่นๆ สำหรับการพิมพ์ ดังนั้น การประกาศสไตล์ชีตนี้จึงไม่จำเป็นต้องบล็อกการแสดงผลหน้าเว็บเมื่อโหลดครั้งแรก สุดท้าย การประกาศสไตล์ชีตสุดท้ายจะระบุ "คำค้นหาสื่อ" ซึ่งเบราว์เซอร์จะดำเนินการ หากเงื่อนไขตรงกัน เบราว์เซอร์จะบล็อกการแสดงผลจนกว่าจะดาวน์โหลดและประมวลผลสไตล์ชีตเสร็จ
การใช้คำค้นหาสื่อช่วยให้เราปรับแต่งการนำเสนอให้เหมาะกับกรณีการใช้งานที่เฉพาะเจาะจง เช่น การแสดงผลเทียบกับการพิมพ์ รวมถึงเงื่อนไขแบบไดนามิก เช่น การเปลี่ยนแปลงการวางแนวหน้าจอ เหตุการณ์การปรับขนาด และอื่นๆ เมื่อประกาศชิ้นงานสไตล์ชีต โปรดให้ความสำคัญกับประเภทสื่อและคำค้นหาสื่อ เนื่องจากชิ้นงานเหล่านี้ส่งผลต่อประสิทธิภาพการทำงานของเส้นทางการแสดงผลที่สำคัญอย่างมาก
ดูตัวอย่างต่อไปนี้
<link href="style.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" media="all" />
<link href="portrait.css" rel="stylesheet" media="orientation:portrait" />
<link href="print.css" rel="stylesheet" media="print" />
- การประกาศแรกจะบล็อกการแสดงผลและตรงกับทุกเงื่อนไข
- การประกาศที่ 2 ก็บล็อกการแสดงผลเช่นกัน เนื่องจาก
"all"เป็นประเภทเริ่มต้น ดังนั้นหากคุณไม่ได้ระบุประเภท ระบบจะตั้งค่าเป็น"all"โดยนัย ดังนั้น การประกาศแรกและการประกาศที่ 2 จึงเทียบเท่ากัน - การประกาศที่ 3 มีคำค้นหาสื่อแบบไดนามิก ซึ่งจะได้รับการประเมินเมื่อโหลดหน้าเว็บ
portrait.cssอาจบล็อกการแสดงผลหรือไม่ก็ได้ ทั้งนี้ขึ้นอยู่กับการวางแนวของอุปกรณ์ขณะโหลดหน้าเว็บ - การประกาศสุดท้ายจะใช้เมื่อมีการพิมพ์หน้าเว็บ (
"print") เท่านั้น ดังนั้นจึงไม่บล็อกการแสดงผลเมื่อโหลดหน้าเว็บในเบราว์เซอร์ครั้งแรก
สุดท้าย โปรดทราบว่า "การบล็อกการแสดงผล" หมายถึงเฉพาะกรณีที่เบราว์เซอร์ต้องระงับการแสดงผลเริ่มต้นของหน้าเว็บในทรัพยากรนั้น ไม่ว่าในกรณีใดก็ตาม เบราว์เซอร์จะยังคงดาวน์โหลดชิ้นงาน CSS แต่จะให้ความสำคัญกับทรัพยากรที่ไม่บล็อกการแสดงผลน้อยกว่า