CSS放head仍闪烁是因为外部样式表默认不阻塞HTML解析，导致CSSOM未就绪前页面先渲染。关键在确保关键样式阻塞渲染：用rel="preload" as="style"提前加载并配合onload切换为stylesheet，禁用@import和JS动态插入，构建时输出静态CSS文件。
为什么CSS放在
里还是闪？
因为浏览器解析HTML时，遇到外部会发起网络请求，但默认不阻塞后续HTML解析（除非有media匹配或disabled），而一旦样式表加载完成、CSSOM构建完毕，才会触发重排重绘——这中间的空白期就是闪烁来源。关键不是“放没放头部”，而是“是否真正阻塞了渲染直到关键样式就绪”。
用rel="preload"提前拉取关键CSS
把核心样式文件（如重置、布局、首屏组件）用声明在最前面，强制浏览器高优先级下载，且不执行，等后续出现时直接复用已加载资源。
-
rel="preload"必须配as="style"，否则不会被识别为样式资源 - 不能省略
onload回调，否则加载完不会自动应用；典型写法：<link rel="preload" href="critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
- IE不支持
preload，需配合rel="stylesheet"降级：同一文件写两遍，第二遍无preload属性
避免@import和动态插入样式表
@import在CSS内部使用会引发串行加载，延迟关键CSS就绪时间；JS动态创建或更糟——它完全绕过HTML解析器预加载机制，必然导致FOUC（Flash of Unstyled Content）。
- 所有
@import都应转成标签，按依赖顺序排列 - JS中插入样式，只适用于非关键、可延迟的模块（如暗色主题切换），首屏样式绝不能靠JS注入
- Webpack/Vite等构建工具若配置了
style-loader，默认就是动态插入，生产环境务必改用mini-css-extract-plugin输出静态.css文件
内联首屏关键CSS + 外链剩余样式
把首屏渲染必需的CSS（通常
的- 内联内容必须精简：删注释、压缩、剔除未用选择器（可用PurgeCSS）
- 服务端渲染（SSR）场景下，需在生成HTML时动态注入对应路由的关键CSS，不能写死
- 注意HTTP缓存失效问题：内联CSS随HTML更新，外链CSS可长期缓存，二者版本需解耦
真正难的不是“放哪里”，是判断哪些CSS算“关键”——它取决于设备尺寸、用户登录态、A/B实验分组，甚至当前路由参数。这个边界一旦划错，要么白内联（仍闪烁），要么过度内联（HTML体积暴涨拖慢首字节）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
