通常情况下我们写媒体查询都是写在一个样式文件中，对于浏览器加载的时候，会解析到最后一行样式时才会渲染页面，这样就会造成页面的白屏时间过长。
但是通常情况下大量的媒体查询样式都是无用的，现在浏览器允许我们在引用样式文件的时候就可以指定媒体查询，这样没有匹配到的样式加载的优先级会被降低，从而提升页面的渲染速度。
案例
假设我们有一个页面，需要在不同的设备上显示不同的样式，我们可能会这样写：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/desktop.css">
<link rel="stylesheet" href="css/mobile.css">
</head>
<body></body>
</html>
- desktop.css
html, body {
margin: 0;
padding: 0;
}
body {
background: pink;
}
- mobile.css
@media (max-width: 600px) {
body {
background: lightblue;
}
}
这样有什么问题呢？我们先来分析一下在这整个期间发生了什么：
首先是网络，可以看到优先级都是最高的，优先级最高代表着会被优先加载，css加载又会阻塞渲染，所以如果css文件过大，会造成页面的白屏时间过长。
再看性能分析，在网络一栏并行发送了两个请求，可以看到mobile.css是后加载出来的，但是渲染是在mobile.css加载完成之后才开始的，但是桌面模式下不需要mobile.css，这样就造成白屏时间延长。
解决方案
这个时候我们就可以使用外置的媒体查询，来解决这个问题，我们只需要在link标签上添加media属性，就可以实现这个效果。
<link rel="stylesheet" href="css/desktop.css" media="screen and (min-width: 600px)">
<link rel="stylesheet" href="css/mobile.css" media="screen and (max-width: 600px)">
在我们加上这个属性之后，我们再来看一下网络和性能分析：
网络方面可以看到，当我的设备分辨率小于600px的时候，desktop.css虽然放在最前面，但是优先级却是最低的，而mobile.css则是最先加载的。
性能方面可以看到，desktop.css一加载完毕就开始渲染页面，而mobile.css则是继续加载，仿佛不关心页面的渲染，这样页面的白屏时间就有效的缩短了。
这次我调整了分辨率，因为
desktop.css加载比较快，可以看我画红色竖线的地方，desktop.css加载完毕之后，页面就开始渲染了；
同时使用这种方式加载，可以省掉css文件中的媒体查询，这样可以减少css文件的大小，提高加载速度。
其他用法
这种方式可以支持几乎所有的媒体查询，比如：
<link rel="stylesheet" href="css/print.css" media="print">
<link rel="stylesheet" href="css/landscape.css" media="screen and (orientation: landscape)">
<link rel="stylesheet" href="css/retina.css" media="screen and (-webkit-min-device-pixel-ratio: 2)">
这些都可以通过media属性来实现，但是需要注意的是，目前并不是所有的浏览器都支持这种方式，而且部分浏览器表现形式也不相同。
由于个人设备有限，我这里只是在chrome上写的示例，根据资料显示，firefox和safari都支持这种方式，但是safari并没有做任何优化。
本文正在参加「金石计划 . 瓜分6万现金大奖」
