首先提取首屏关键CSS并预加载，再异步加载非关键CSS，结合合并压缩与CDN缓存，通过preload和media属性优化加载时机，减少阻塞，提升首屏渲染速度。
页面加载外部CSS太多导致渲染阻塞、首屏变慢，核心问题在于关键CSS资源未优先加载。通过合理使用 preload 提前加载核心样式，并分离非关键CSS，可以显著提升首屏渲染速度。
提取并预加载核心CSS（Critical CSS）
首屏渲染所需的最小化CSS称为“关键CSS”。将这部分内联或通过 preload 优先加载，能避免白屏或闪屏。
做法如下：
- 分析页面结构，提取首屏元素用到的CSS规则（如头部、主标题、按钮等）
- 使用工具如 critical、Penthouse 或 Google PageSpeed Insights 自动生成关键CSS
- 在 <head> 中通过 link[rel=preload] 提前加载关键CSS文件
<noscript><link rel="stylesheet" href="critical.css"></noscript>
异步加载非关键CSS
非首屏用到的CSS（如页脚、动画、响应式断点）应延迟加载，避免阻塞渲染。
立即学习“前端免费学习笔记（深入）”；
推荐方式：
- 对非核心CSS使用 rel="preload" 预加载，但不立即应用
- 加载完成后动态设置 rel="stylesheet" 激活
- 可结合媒体查询按需加载（如 print、max-width）
配合 JavaScript 实现更精细控制：
function loadCSS(href) {const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = href;
document.head.appendChild(link);
}
// 滚动或空闲时加载
window.addEventListener('load', () => loadCSS('non-critical.css'));
合并与压缩CSS资源
过多HTTP请求会增加开销，即使预加载也建议减少文件数量。
- 构建阶段将多个CSS合并为1-2个文件（如 core.css + theme.css）
- 使用 Gzip / Brotli 压缩CSS文本
- 删除无用CSS（借助 PurgeCSS、UnCSS 等工具）
- 启用CDN缓存静态CSS资源
使用 media 属性优化加载时机
针对特定场景的CSS可通过 media 属性延迟解析。
- 打印样式表不会阻塞渲染：
<link rel="stylesheet" href="print.css" media="print"> - 响应式CSS延迟加载：
<link rel="preload" href="tablet.css" as="style" media="(min-width: 768px)">
基本上就这些。关键思路是：识别核心样式 → preload 提前拉取 → 异步加载其余 → 减少请求数。这样既能保证首屏快，又不影响完整样式呈现。
