白屏主因是关键css未及时加载，需内联首屏样式并异步加载剩余css；http/2不改变css阻塞渲染的本质；构建时注入、避免@import和动态主题整套内联。
白屏是因为关键CSS没及时加载
浏览器渲染页面前必须解析完所有style标签和link[rel="stylesheet"]，如果这些资源体积大、路径深或被CDN缓存策略拖慢，首屏就卡在白屏。不是JS阻塞，是CSS阻塞了渲染树构建。
- 只把真正影响首屏（above-the-fold）的样式内联进
，比如导航栏、标题、首屏按钮的规则 - 用
critical这类工具提取关键CSS，别手写——手写容易漏媒体查询或伪类 - 避免内联整个
main.css：超过14KB可能触发移动端强制同步解析，反而更慢
内联CSS后怎么加载剩余样式
内联只是“垫脚石”，后续非关键CSS得异步加载，否则重复下载、浪费带宽，还可能因@import造成阻塞。
- 用
link[rel="preload"][as="style"]提前拉取完整CSS，再用onload切换rel为stylesheet - 禁止在内联CSS里写
@import url(...)：它会同步阻塞，等同于没优化 - Webpack/Vite用户注意：
mini-css-extract-plugin默认不支持自动切分关键CSS，得配critters或手动拆包
HTTP/2下仍要内联？
HTTP/2多路复用能并发传多个CSS文件，但不能绕过“浏览器必须收到并解析CSS才能开始渲染”这个硬限制。只要首屏样式不在HTML响应体里，白屏风险就还在。
- 即使开了HTTP/2，
link加载的CSS仍需一次RTT+解析时间，而内联CSS随HTML一起到达 - CDN边缘节点可能缓存了HTML但没缓存CSS，导致首屏加载时CSS回源，延迟飙升
- 实测显示：在3G弱网下，内联关键CSS可将FCP（首次内容绘制）从2.8s降到0.9s
Vue/React项目里怎么安全内联
框架生成的HTML常由服务端渲染（SSR）或静态生成（SSG）产出，直接改index.html会失效。必须在构建流程中注入。
- Next.js：用
getServerSideProps或getStaticProps配合critters插件注入 - Vue CLI：在
vue.config.js中用html-webpack-plugin的htmlWebpackPlugin.tags钩子插入内联<style></style> - 注意SSR环境下的
window访问：内联逻辑必须运行在Node端，别在mounted()里尝试操作document.head
最麻烦的其实是动态主题切换——内联的CSS一旦写死，换肤就失效。这时候得用CSS变量+少量内联基础色值，而不是整套主题CSS都内联。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
