内联关键css能减少白屏时间，因其跳过外部css的http请求，使浏览器更快构建cssom并绘制首屏；但仅限真正影响首屏的样式，需工具辅助提取、压缩转义，并异步加载剩余css。
为什么内联关键CSS能减少白屏时间
浏览器渲染页面前必须解析并构建CSSOM，而外部CSS文件会触发网络请求，阻塞渲染。把首屏必需的样式（比如导航、标题、按钮）直接写进 ，能让浏览器跳过一次HTTP请求，更快开始绘制。
不是所有CSS都该内联——只有真正影响首屏（Above-the-fold）渲染的才值得放进去。过度内联反而增大HTML体积，拖慢首屏HTML下载和解析。
- 判断“关键”：用Chrome DevTools的Coverage面板（
More Tools → Coverage），刷新页面后看哪些CSS规则被实际用到 - 工具辅助：
critters（Vite插件）、penthouse（Node CLI）可自动提取关键CSS - 注意：内联后记得移除对应外部文件的
<link rel="stylesheet">，否则样式重复应用
内联CSS时常见的错误写法
直接复制粘贴CSS内容进<style></style>标签看似简单，但容易出问题：
- 忘记转义
、<code>&等字符，导致HTML解析失败（尤其当CSS里有@keyframes或注释含
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
