使用media来加载css

 

• 默认的，css被当做渲染时候必须加载的资源.
• 设备类型和设备询问允许我们设置一些css资源编程可选的
• 对于所有的css资源，无论是必须的还是可选的，都会被浏览器加载

The New York Times with CSSThe New York Times without CSS (FOUC)

上面显示了加载css和不加载css样式的效果，不加载css显示的页面同样被叫做 “Flash of Unstyled Content” (FOUC).

所有，页面的渲染必须需要DOM和CSSOM。

css是渲染所必须的资源，所以越快的获取css资源将优化渲染

CSS “media types”和 “media queries” 允许我们指定css的使用条件：

一个media query包括了设备类型和一个亦或更多的表达式来表明设备的特点。

如果设备满足media query，那么将会暂停阻塞来加载css资源。

<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">

• 第一个声明表示在任何类型的设备上均会加载css文件
• 第二个声明中all是默认参数，和第一个是等价的。
• 第三个声明表明css文档的加载将根据设备的方向来决定是否加载
• 最后一个旨在打印设备中才会加载 

记住，不管media上对css做出了怎样的加载显示，浏览器都是下载了所有css文件的。

 

原文：https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css?hl=en