白屏时间长的核心是渲染阻塞，关键解法是用media="only x"暂跳过非关键CSS解析，再由JS动态激活，配合内联首屏关键CSS，避免FOUC与阻塞。
移动端白屏时间长，核心不是CSS文件太大，而是浏览器在等它解析完才肯画第一帧——link rel="stylesheet" 默认就是渲染阻塞的。媒体查询拆分本身不减少阻塞，但配合media属性值的「条件激活」，能让部分CSS跳过初始解析，这才是减小白屏的关键。
为什么直接按设备拆成 mobile.css / tablet.css / desktop.css 反而更慢
很多人把 CSS 拆成三份后全扔进 <head>，结果发现 FCP 没变快，甚至更差。原因很实在：
-
<link rel="stylesheet" href="mobile.css">和<link rel="stylesheet" href="desktop.css">都在<head>里 → 浏览器并行下载，但**全部阻塞渲染**，哪怕desktop.css用的是min-width: 1200px - iPad Pro 的 viewport 宽度常为 1024px 或更高，
max-width: 1024px判断失效，它可能既加载了mobile.css又加载了desktop.css，样式冲突或重复解析 - 维护成本陡增：改一个按钮颜色，得同步修三个文件；CI 构建时还要校验 media 匹配逻辑是否一致
真正起效的 media 属性写法：用「无效值」跳过初始解析
关键不在“拆”，而在“让浏览器暂时忽略”。正确姿势是把非关键 CSS 的 media 设为一个当前不匹配、且浏览器不会解析样式的值：
- 写成
media="only x"（x 是任意非法媒体类型）→ 浏览器立刻跳过该 CSS 的下载与解析，不阻塞渲染 - 等 JS 检测到真实设备宽度或用户交互后，再把
media改回"screen"或具体断点，触发加载与应用 - 这正是
loadCSS()的底层原理：ss.media = "only x"→ss.media = "all"（或目标 media）
示例：
立即学习“前端免费学习笔记（深入）”；
<link rel="stylesheet" href="non-critical.css" media="only x">
<script>
// 检测到是桌面宽屏，激活
if (window.matchMedia('(min-width: 1025px)').matches) {
document.querySelector('[href="non-critical.css"]').media = 'screen';
}
</script>
media 属性 + 内联 critical CSS 才是黄金组合
只靠 media 拆分解决不了首屏样式缺失问题。必须和内联关键 CSS 配合，否则会 FOUC（闪白）或布局抖动：
- 提取首屏必需样式（导航栏、标题、首屏卡片容器），用工具如
critical或Penthouse自动产出，内联到<style>中 - 其余样式统一走
media="only x"的<link>，由 JS 控制激活时机 - 避免在
<head>里写<link rel="stylesheet" href="xxx.css">（无 media）—— 这是默认阻塞源 - 不要用
@import：它在 CSS 文件里调用其他 CSS，强制串行请求，比<link>多一次 RTT
最易被忽略的一点：media 值是否生效，取决于它是否被浏览器「当前认为需要解析」。写 media="(max-width: 768px)" 并不能让 CSS 异步——只要它在 <head> 里，浏览器就会立即尝试匹配并阻塞。真正可控的只有「先设为无效，再动态激活」这一条路。
