应只为首屏必需且被HTML中<link>引用的关键CSS使用preload，如main.css；需配合onload转为stylesheet，并内联极小关键CSS以优化FCP/LCP。
CSS 文件加载慢会导致页面渲染阻塞，出现白屏或样式闪烁。用 preload 提前加载关键 CSS 是有效解法，但要注意用对地方、避免误用。
什么时候该用 preload 加载 CSS
只对首屏必需、且被 HTML 中 <link rel="stylesheet"> 引用的关键 CSS 使用 preload。比如主样式表（main.css）、重置样式（reset.css）或主题样式（theme.css）。非首屏、异步加载或媒体查询条件下的 CSS 不适合 preload。
- ✅ 推荐：在
<head>中用<link rel="preload" as="style" href="main.css"> - ❌ 避免：为所有 CSS 都加 preload，会抢占带宽、干扰浏览器预加载优先级
- ⚠️ 注意：preload 不会执行 CSS，必须同时保留原始
<link rel="stylesheet">
preload + onload 补全执行逻辑
preload 只下载不应用，所以需配合 onload 将其转为可生效的样式表。否则资源下完了也没用。
- 写法示例：
<link rel="preload" as="style" href="main.css" onload="this.rel='stylesheet'"> - 兼容性处理：旧版 Safari 不支持
onload，可用 JS 回退：
<script>const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'main.css'; document.head.appendChild(link);</script>
验证是否生效：看 Network 和 Rendering 时间线
打开 Chrome DevTools → Network 标签，筛选 main.css，确认：
- Initiator 显示为
preload（不是 parser 或 script） - Start Time 尽可能靠前，早于 HTML 解析完成时间
- 对比未加 preload 的版本，FCP（首次内容绘制）和 LCP（最大内容绘制）应有明显提前
若发现 preload 请求延迟或被取消，可能是路径错误、CORS 限制或服务器未正确返回 Content-Type: text/css。
立即学习“前端免费学习笔记（深入）”；
比 preload 更进一步：内联关键 CSS
对于极小的关键样式（如首屏排版、字体、按钮基础样式），直接内联到 HTML <style> 中，彻底消除请求。再配合 preload 加载剩余 CSS，效果更优。
- 工具推荐：PurgeCSS + Critical（自动提取首屏关键 CSS）
- 注意内联体积控制：一般不超过 14KB（避免触发 TCP 慢启动额外往返）
- 后续 CSS 仍用
<link rel="stylesheet">，确保可缓存、可复用
