แสดงผล CSS ที่บล็อก

โดยค่าเริ่มต้น ระบบจะถือว่า CSS เป็นทรัพยากรการบล็อกการแสดงผล ซึ่งหมายความว่าเบราว์เซอร์จะไม่แสดงผลเนื้อหาที่ประมวลผลแล้วจนกว่าจะมีการสร้าง CSSOM คุณควรรักษา CSS ให้คงที่ แสดงโฆษณาให้เร็วที่สุด และใช้ประเภทสื่อและคำค้นหาเพื่อเลิกบล็อกการแสดงผล

ในการสร้างแผนผังการแสดงผล เราเห็นว่าเส้นทางการแสดงผลวิกฤติต้องใช้ทั้ง DOM และ CSSOM ในการสร้างโครงสร้างการแสดงผล ซึ่งสร้างนัยสำคัญด้านประสิทธิภาพ นั่นคือ ทั้ง HTML และ CSS ต่างแสดงผลทรัพยากรที่บล็อกอยู่ HTML นั้นชัดเจน เนื่องจากเมื่อไม่มี DOM เราจะไม่มีข้อมูลใดๆ ที่จะแสดง แต่ข้อกำหนดของ CSS อาจไม่ชัดเจนนัก จะเกิดอะไรขึ้นหากเราพยายามแสดงผลหน้าเว็บทั่วไปโดยไม่บล็อกการแสดงผลบน CSS

สรุป

  • โดยค่าเริ่มต้น ระบบจะถือว่า CSS เป็นทรัพยากรการบล็อกการแสดงผล
  • ประเภทสื่อและคำค้นหาสื่อช่วยให้เราทำเครื่องหมายทรัพยากร CSS บางรายการเป็นการบล็อกแบบไม่แสดงผลได้
  • เบราว์เซอร์จะดาวน์โหลดทรัพยากร CSS ทั้งหมดโดยไม่คำนึงถึงลักษณะการบล็อกหรือการบล็อก
NYTimes กับ CSS
The New York Times กับ CSS
NYTimes ที่ไม่มี CSS
The New York Times โดยไม่มี CSS (FOUC)

ตัวอย่างด้านบนซึ่งแสดงเว็บไซต์ 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 แม้ว่าจะมีลำดับความสำคัญต่ำกว่าสำหรับทรัพยากรที่ไม่บล็อกก็ตาม

ความคิดเห็น