The above example, showing the NYTi

The above example, showing the NYTimes website with and without CSS, demonstrates why rendering is blocked until CSS is available - without CSS the page is effectively unusable. In fact, the experience on the right is often referred to as a “Flash of Unstyled Content” (FOUC). As a result, the browser will block rendering until it has both the DOM and the CSSOM.

CSS is a render blocking resource, get it down to the client as soon and as quickly as possible to optimize the time to first render!

However, what if we have some CSS styles that are only used under certain conditions, for example, when the page is being printed, or being projected onto a large monitor? It would be nice if we didn’t have to block rendering on these resources!

CSS “media types” and “media queries” allow us to address these use-cases:

ผลลัพธ์ (ไทย) 1:

ตัวอย่างข้างต้น แสดงเว็บไซต์ NYTimes ที่มี และไม่ มี CSS แสดงให้เห็นถึงเหตุภาพถูจนกว่า CSS ได้ - ไม่สามารถใช้งานได้อย่างมีประสิทธิภาพ โดย CSS หน้า ในความเป็นจริง ประสบการณ์ด้านขวามักจะเรียกว่าการ "แฟลชของ Unstyled เนื้อหา" (FOUC) ดัง เบราว์เซอร์จะบล็อกแสดงผลจนกว่ามีการ DOM และ CSSOMCSS เป็นทรัพยากรบล็อก render ได้ไปยังไคลเอนต์เป็นเร็ว และเร็วที่สุดเพื่อเพิ่มเวลาในการ render ที่แรกอย่างไรก็ตาม ถ้าเรามี CSS บางรูปแบบที่จะใช้เฉพาะภายใต้เงื่อนไขบางอย่าง เช่น เมื่อกำลังพิมพ์หน้า หรือการคาดการณ์ไปยังจอภาพขนาดใหญ่ มันจะดีถ้าเราไม่มีการบล็อกการจำลองทรัพยากรเหล่านี้CSS "ชนิดของสื่อ" และ "แบบสอบถามสื่อ" ทำให้เราใช้กรณีเหล่านี้:

ผลลัพธ์ (ไทย) 2:

ตัวอย่างข้างต้นแสดงให้เห็นเว็บไซต์ NYTimes ที่มีและไม่มี CSS, แสดงให้เห็นว่าทำไมการแสดงผลที่ถูกบล็อคจนกว่า CSS สามารถใช้ได้ - ไม่ CSS หน้าเป็นไปไม่ได้อย่างมีประสิทธิภาพ ในความเป็นจริงที่มีประสบการณ์ทางด้านขวามักจะถูกเรียกว่าเป็น "Flash ของเนื้อหา Unstyled" (FOUC) เป็นผลให้เบราว์เซอร์จะป้องกันการแสดงผลจนกว่าจะมีทั้งพระและ CSSOM ได้. CSS เป็นทรัพยากรที่มีการปิดกั้นทำให้ได้รับมันลงไปยังลูกค้าโดยเร็วที่สุดและเร็วที่สุดเท่าที่เป็นไปได้ที่จะเพิ่มประสิทธิภาพครั้งแรกทำให้! แต่สิ่งที่ ถ้าเรามีบางรูปแบบ CSS ที่ใช้เฉพาะภายใต้เงื่อนไขบางประการเช่นเมื่อหน้าจะถูกพิมพ์หรือถูกฉายบนจอขนาดใหญ่? มันจะดีถ้าเราไม่ได้มีเพื่อป้องกันการแสดงผลเกี่ยวกับทรัพยากรเหล่านี้CSS "สื่อประเภท" และ "คำสั่งสื่อ" ช่วยให้เราสามารถอยู่ใช้กรณีเหล่านี้:

ผลลัพธ์ (ไทย) 3:

ตัวอย่างข้างต้นแสดงให้เห็น nytimes เว็บไซต์ที่มีและไม่มีการแสดงผล CSS แสดงให้เห็นถึงถูกบล็อคจนกว่า CSS สามารถใช้ได้โดยไม่ต้อง CSS หน้าได้อย่างมีประสิทธิภาพที่ใช้ไม่ได้ ในความเป็นจริง , ประสบการณ์ด้านขวามักจะเรียกว่าเป็น " แฟลชของ unstyled เนื้อหา " ( fouc ) ผลคือ เบราว์เซอร์จะป้องกันการแสดงผลจนกว่าจะได้ทั้ง ดอม และ cssom .

CSS เป็นแสดงบล็อกทรัพยากร เอาลงให้ลูกค้าโดยเร็วที่สุดและเร็วที่สุดเพื่อเพิ่มเวลาก่อนการแสดง !

แต่ถ้าเรามีรูปแบบ CSS ที่ใช้เฉพาะภายใต้เงื่อนไขบางอย่าง ตัวอย่างเช่น เมื่อเพจถูกตีพิมพ์หรือถูกฉายบนจอภาพขนาดใหญ่ มันคงจะดีถ้าเราไม่ได้มีเพื่อป้องกันการแสดงผลเกี่ยวกับทรัพยากรเหล่านี้

CSS " สื่อมวลชน " และ " แบบสอบถามสื่อ " ให้เราเรียกใช้กรณีนี้