通常情況下我們寫媒體查詢都是寫在一個樣式檔案中，對于浏覽器加載的時候，會解析到最後一行樣式時才會渲染頁面，這樣就會造成頁面的白屏時間過長。
但是通常情況下大量的媒體查詢樣式都是無用的，現在浏覽器允許我們在引用樣式檔案的時候就可以指定媒體查詢，這樣沒有比對到的樣式加載的優先級會被降低，進而提升頁面的渲染速度。
案例
假設我們有一個頁面，需要在不同的裝置上顯示不同的樣式，我們可能會這樣寫：
<!DOCTYPE html>
<html >
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/desktop.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><link rel="stylesheet" href="css/mobile.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
</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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" media="screen and (min-width: 600px)">
<link rel="stylesheet" href="css/mobile.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 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" target="_blank" rel="external nofollow" media="print">
<link rel="stylesheet" href="css/landscape.css" target="_blank" rel="external nofollow" media="screen and (orientation: landscape)">
<link rel="stylesheet" href="css/retina.css" target="_blank" rel="external nofollow" media="screen and (-webkit-min-device-pixel-ratio: 2)">
這些都可以通過
media
屬性來實作，但是需要注意的是，目前并不是所有的浏覽器都支援這種方式，而且部分浏覽器表現形式也不相同。
由于個人裝置有限，我這裡隻是在
chrome
上寫的示例，根據資料顯示，
firefox
和
safari
都支援這種方式，但是
safari
并沒有做任何優化。
最後
整理了一套《前端大廠面試寶典》，包含了HTML、CSS、JavaScript、HTTP、TCP協定、浏覽器、VUE、React、資料結構和算法，一共201道面試題，并對每個問題作出了回答和解析。
有需要的小夥伴，可以點選文末卡片領取這份文檔，無償分享
部分文檔展示：
文章篇幅有限，後面的内容就不一一展示了
有需要的小夥伴，可以點下方卡片免費領取