解决CSS延迟加载导致的FOUC闪屏，核心是让关键CSS尽早同步加载：优先内联首屏关键CSS；非关键CSS用preload+stylesheet组合或media="not all"+onload惰性加载，并做浏览器兼容检测。
CSS样式延迟加载导致页面闪屏，本质是浏览器先渲染了无样式的HTML（FOUC，Flash of Unstyled Content），等CSS加载并解析完成后才重绘。解决核心思路是：让关键CSS尽早、同步、可靠地到达渲染引擎。使用 <link rel="preload"> 是其中一种有效手段，但它不是万能的，需配合正确策略使用。
preload 本身不执行CSS，只是提前下载
<link rel="preload" as="style" href="main.css"> 的作用仅是告诉浏览器“这个CSS文件很重要，现在就去下载”，但不会自动插入到DOM或应用样式。如果不同时用 <link rel="stylesheet">，页面依然无样式。
正确写法是两者共存：
<link rel="preload" as="style" href="main.css"><br><link rel="stylesheet" href="main.css">
这样浏览器在解析HTML早期就发起CSS请求，避免被后续脚本阻塞，缩短样式可用时间。
立即学习“前端免费学习笔记（深入）”；
只对关键CSS使用 preload，避免滥用
preload 会提升资源优先级，但过度使用反而挤占带宽，影响其他关键资源（如首屏图片、JS）。建议仅预加载首屏必需的CSS（如重置、布局、按钮/标题等基础样式），而非整个打包后的 app.css。
- 提取关键CSS（Critical CSS），内联到
中（最快速生效） - 剩余非关键CSS用
preload + stylesheet组合异步加载 - 或用
media="print" onload="this.media='all'"方式惰性加载非关键CSS
注意浏览器兼容性与 fallback
preload 在 Chrome、Firefox、Edge 80+、Safari 14+ 支持良好，但旧版 Safari 和 IE 完全不支持。若需兼容，可结合 JS 检测：
if ("preload" in document.createElement("link")) {<br> // 插入 preload 标签<br>} else {<br> // 回退为普通 link 或内联关键CSS<br>}
更稳妥的做法是：把最关键的部分内联，其余用常规 <link rel="stylesheet">，再叠加 preload 作为性能优化项——有则更好，无也不破功能。
配合 defer 或 media 切换，进一步防阻塞
如果CSS非首屏必需（比如主题色、动画效果），可加 media="not all" 临时隐藏其阻塞行为，再通过 JS 或 onload 触发启用：
<link rel="preload" as="style" href="theme.css"><br><link rel="stylesheet" href="theme.css" media="not all" onload="this.media='all'">
这样既利用 preload 提前下载，又避免它阻塞页面渲染，兼顾速度与稳定性。
基本上就这些。preload 是个好工具，但得用在刀刃上——关键CSS早下载、早应用，非关键CSS晚加载、不干扰。搭配内联、媒体查询和简单检测，闪屏问题就能明显缓解。
