- 使用
media属性：
通过指定媒体查询，浏览器会只对匹配当前环境的样式表进行渲染阻塞。例如，<link rel="stylesheet" href="print.css" media="print"> <link rel="stylesheet" href="large-screen.css" media="(min-width: 1200px)">media="print"的样式表在屏幕显示时不会阻塞渲染。
3. 压缩与精简CSS文件 无论采用何种加载策略，减小文件体积都是永恒的主题。
- 压缩：使用工具（如CSSNano、Clean-CSS）移除所有不必要的字符，包括空白、注释等。
- 精简：利用Tree Shaking技术（如PurgeCSS），分析你的HTML、JS文件，只保留实际使用到的CSS规则，彻底删除未使用的“死代码”。
4. 利用浏览器缓存
对于不会频繁变动的CSS文件，设置强缓存策略（如Cache-Control: max-age=31536000）至关重要。这样， returning 用户在后续访问时可以直接从本地磁盘读取CSS，实现瞬时加载。
三、实践流程与注意事项
一个完整的CSS交付优化流程可以是：
- 分析：使用Lighthouse或PageSpeed Insights等工具进行性能评估，它会明确指出渲染阻塞的CSS资源。
- 提取与内联：提取关键CSS并内联到
<head>中。 - 异步加载：将原始的全量CSS文件通过
preload或其他技术异步加载。 - 测试：务必在不同设备和网络环境下测试，确保没有出现FOUC，并且异步加载的样式能正确应用。
注意事项：
- 平衡内联体积：内联CSS虽好，但会增大HTML文件体积，且无法被浏览器单独缓存。通常建议内联的CSS大小控制在10KB以下。
- 避免@import：在CSS文件中使用
@import规则会引入额外的渲染阻塞回合，应尽量避免，改用多个<link>标签。
结语
优化CSS交付，避免渲染阻塞，绝非可有可无的微调，而是构建快速、流畅现代网站的基石。通过将核心策略——内联关键CSS与异步加载非关键CSS——相结合，我们能够巧妙地“欺骗”浏览器，使其优先渲染用户最关心的内容，从而大幅提升感知性能。每一次对CSS交付的精心优化，都是对用户体验的一次郑重承诺，它让等待变得更短，让交互变得更即时，最终在激烈的竞争中赢得用户的青睐。
