首屏闪烁源于关键CSS未及时就位。需内联critical CSS并配合preload，避免@import串行加载、高延迟CDN及未优化media属性导致的FOUC。
CSS 关键样式没抢在 HTML 渲染前就位，首屏必然闪烁。用 <link rel="stylesheet"> 是基础，但光放 里不够——浏览器解析 HTML 是流式的，遇到 <link> 才开始 fetch 和 parse CSS，这中间的空白期，HTML 已经开始渲染未样式化的 DOM，白屏或闪动就来了。
为什么 <link> 放
现代浏览器对 <link rel="stylesheet"> 确实会阻塞渲染（直到 CSSOM 构建完成），但前提是它被及时发现。如果关键样式分散在多个文件、或被 @import 嵌套、或路径指向了高延迟 CDN，加载耗时一超 200ms，用户就能感知到 FOUC（Flash of Unstyled Content）。
-
@import在 CSS 文件内使用会串行加载，完全废掉并行下载能力 - 没有设置
media的<link>会被立即加载并阻塞；但设成media="print"的，虽不阻塞，也不会应用到屏幕 - HTTP/2 下多个
<link>可复用连接，但首字节延迟（TTFB）仍决定“最早能开始下载的时间”
真正起效的提前加载：preload + critical CSS 内联
只靠 <link> 不够，得让关键样式“比 HTML 解析还快一步”。核心是两件事：把最必要的规则（字体、颜色、布局骨架）内联进 ；再用 <link rel="preload"> 提前拉取主样式表。
<head>
<!-- 内联关键 CSS（<30KB，避免 base64 字体） -->
<style>
body { margin: 0; font-family: system-ui; }
.header { background: #222; color: white; }
.hero { height: 100vh; display: flex; }
</style>
<p><!-- 提前触发主样式表下载，不阻塞渲染 -->
<link rel="preload" href="/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/main.css"></noscript>
</head>-
rel="preload"让浏览器在 HTML 解析早期就发起请求，不等 parser 到达该标签 -
as="style"告诉浏览器这是样式资源，参与资源优先级调度 -
onload回调里改rel是为了兼容性：Chrome/Edge 支持 preload 后自动转 stylesheet，Safari/Firefox 需手动触发 - 保留
<noscript></noscript>降级，确保无 JS 时样式仍可用
哪些 CSS 算“关键”，怎么提取
关键 CSS 不是“所有首屏用到的样式”，而是“首屏渲染前必须就位的最小规则集”。比如一个新闻首页，关键样式可能只含：body 排版、导航栏固定定位、标题字号行高、卡片基础边框阴影——但不需要轮播图的 transform 动画或评论区的 :hover 状态。
立即学习“前端免费学习笔记（深入）”；
- 工具推荐：
critters（Webpack 插件）、penthouse（Node CLI），它们基于真实 viewport 截图分析 DOM 节点用到的样式 - 手动提取风险高：漏掉伪类（
:first-child）、媒体查询（@media (min-width: 768px)）、或动态插入的 class（如 React 的className={loading ? 'skeleton' : ''}） - 不要内联 Web Font 的
@font-face：字体加载本身有延迟，内联反而延长首次绘制（FOIT/FOUT 更明显），应单独preload字体文件
真正难的不是加 preload 标签，而是确定哪几行 CSS 必须内联、哪部分可以安全延后。很多团队卡在“critical CSS 更新滞后”——页面改版后忘了重提关键样式，结果新按钮还是闪一下才变色。自动化提取 + 构建时注入，比手写 <style></style> 可靠得多。
