โดยค่าเริ่มต้น ระบบจะถือว่า CSS เป็นทรัพยากรการบล็อกการแสดงผล ซึ่งหมายความว่าเบราว์เซอร์จะไม่แสดงผลเนื้อหาที่ประมวลผลแล้วจนกว่าจะมีการสร้าง CSSOM คุณควรรักษา CSS ให้คงที่ แสดงโฆษณาให้เร็วที่สุด และใช้ประเภทสื่อและคำค้นหาเพื่อเลิกบล็อกการแสดงผล
ในการสร้างแผนผังการแสดงผล เราเห็นว่าเส้นทางการแสดงผลวิกฤติต้องใช้ทั้ง DOM และ CSSOM ในการสร้างโครงสร้างการแสดงผล ซึ่งสร้างนัยสำคัญด้านประสิทธิภาพ นั่นคือ ทั้ง HTML และ CSS ต่างแสดงผลทรัพยากรที่บล็อกอยู่ HTML นั้นชัดเจน เนื่องจากเมื่อไม่มี DOM เราจะไม่มีข้อมูลใดๆ ที่จะแสดง แต่ข้อกำหนดของ CSS อาจไม่ชัดเจนนัก จะเกิดอะไรขึ้นหากเราพยายามแสดงผลหน้าเว็บทั่วไปโดยไม่บล็อกการแสดงผลบน CSS
สรุป
- โดยค่าเริ่มต้น ระบบจะถือว่า CSS เป็นทรัพยากรการบล็อกการแสดงผล
- ประเภทสื่อและคำค้นหาสื่อช่วยให้เราทำเครื่องหมายทรัพยากร CSS บางรายการเป็นการบล็อกแบบไม่แสดงผลได้
- เบราว์เซอร์จะดาวน์โหลดทรัพยากร CSS ทั้งหมดโดยไม่คำนึงถึงลักษณะการบล็อกหรือการบล็อก
![NYTimes กับ CSS](https://web.developers.google.cn/static/articles/critical-rendering-path/render-blocking-css/image/nytimes-css-de9a8a85f18fa.png?authuser=5&hl=th)
![NYTimes ที่ไม่มี CSS](https://web.developers.google.cn/static/articles/critical-rendering-path/render-blocking-css/image/nytimes-without-css-6d823cc9c8ea4.png?authuser=5&hl=th)
ตัวอย่างด้านบนซึ่งแสดงเว็บไซต์ NYTimes ทั้งที่มีและไม่มี CSS คือแสดงเหตุผลที่การแสดงผลถูกบล็อกจนกว่า CSS จะพร้อมใช้งาน (ในกรณีที่ไม่มี CSS หน้าเว็บดังกล่าวจะใช้งานไม่ได้) ประสบการณ์ทางด้านขวามักเรียกว่า "Flash of Unstyled Content" (FOUC) เบราว์เซอร์จะบล็อกการแสดงผลจนกว่าจะมีทั้ง DOM และ CSSOM
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 นิพจน์ขึ้นไปที่ตรวจหาเงื่อนไขของฟีเจอร์สื่อหนึ่งๆ ตัวอย่างเช่น การประกาศสไตล์ชีตแรกของเราไม่ได้ระบุประเภทสื่อหรือข้อความค้นหา ดังนั้นจึงมีผลในทุกกรณี กล่าวคือ เป็นการบล็อกการแสดงผลเสมอ ในทางกลับกัน การประกาศสไตล์ชีตที่สองจะมีผลเฉพาะเมื่อเนื้อหากำลังพิมพ์ - คุณอาจต้องการจัดเรียงการออกแบบใหม่ เปลี่ยนแบบอักษร และอื่นๆ ดังนั้น การประกาศสไตล์ชีตนี้จึงไม่จำเป็นต้องบล็อกการแสดงผลของหน้าเว็บเมื่อโหลดครั้งแรก สุดท้าย การประกาศสไตล์ชีตล่าสุดจะแสดง "คิวรี่สื่อ" ซึ่งเบราว์เซอร์ดำเนินการ กล่าวคือ หากเงื่อนไขตรงกัน เบราว์เซอร์จะบล็อกการแสดงผลจนกว่าจะดาวน์โหลดและประมวลผลสไตล์ชีต
การใช้คำค้นหาสื่อทำให้เราสามารถปรับแต่งการนำเสนอของเราให้เหมาะสมกับกรณีการใช้งานเฉพาะ เช่น การแสดงผลเทียบกับสิ่งพิมพ์ ตลอดจนเงื่อนไขแบบไดนามิก เช่น การเปลี่ยนการวางแนวหน้าจอ การปรับขนาดเหตุการณ์ และอื่นๆ เมื่อประกาศเนื้อหาสไตล์ชีทของคุณ คุณควรให้ความสำคัญกับประเภทสื่อและข้อความค้นหา เนื่องจากสิ่งเหล่านี้ส่งผลต่อประสิทธิภาพของเส้นทางการแสดงผลที่สำคัญอย่างมาก
ลองพิจารณาตัวอย่างที่เกี่ยวข้องกัน
<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 จึงเทียบเท่ากัน
- การประกาศที่สามมีคำค้นหาสื่อแบบไดนามิก ซึ่งจะได้รับการประเมินเมื่อโหลดหน้าเว็บ ทั้งนี้ขึ้นอยู่กับการวางแนวของอุปกรณ์ขณะที่หน้าเว็บกำลังโหลดอยู่ portrait.css อาจแสดงภาพการบล็อกหรือไม่แสดงผล
- การประกาศล่าสุดจะมีผลเมื่อมีการพิมพ์หน้าเว็บเท่านั้น จึงไม่แสดงผลการบล็อกเมื่อโหลดหน้าเว็บในเบราว์เซอร์เป็นครั้งแรก
สุดท้าย โปรดทราบว่า "การบล็อกการแสดงผล" หมายความเพียงว่าเบราว์เซอร์ต้องระงับการแสดงผลครั้งแรกของหน้าในทรัพยากรนั้นหรือไม่ ในทั้ง 2 กรณี เบราว์เซอร์จะยังคงดาวน์โหลดเนื้อหา CSS แม้ว่าจะมีลำดับความสำคัญต่ำกว่าสำหรับทรัพยากรที่ไม่บล็อกก็ตาม