直接link rel="stylesheet"会阻塞lcp，因浏览器同步下载解析css并暂停html解析；改用rel="preload"可提前下载但不执行，需as="style"、无media、配合onload插入且清除引用，并对关键样式内联以确保首屏渲染前就位。
为什么直接 link rel="stylesheet" 会阻塞 LCP
浏览器遇到 <link rel="stylesheet"> 时，默认同步下载并解析 CSS，期间会暂停 HTML 解析和关键渲染路径——哪怕这个样式表只用于页脚或暗色模式切换。LCP 元素（如首屏大图、标题）若依赖后续 CSS 中的 font-family、color 或 transform，就会被卡住，导致指标变差。
用 rel="preload" 提前拉取但不执行
把 CSS 资源改用 rel="preload" 声明，能绕过渲染阻塞：浏览器会高优先级下载，但不会解析或应用它。
- 必须指定
as="style"，否则浏览器无法预判资源类型，可能降级为普通 fetch - 不能加
media属性（如media="print"），否则 preload 会被忽略 - 需搭配
onload手动插入 DOM，否则样式永远不会生效
<link rel="preload" href="/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
onload 回调里要清除自身引用
如果不设 this.onload = null，Chrome 和 Safari 在某些缓存场景下会重复触发 onload，导致 rel 被反复设为 stylesheet，可能引发样式闪烁或重复计算。
- 推荐写法是立即清除再赋值：
this.onload=null;this.rel='stylesheet' - 避免在
onload里调用外部函数（如loadCSS()），增加执行延迟和作用域风险 - 不要用
addEventListener('load', ...)替代内联onload，因为 preload 的 load 事件不保证冒泡且兼容性更差
注意媒体查询与 SSR 场景下的 fallback
如果 CSS 里有 @media (prefers-color-scheme: dark) 这类逻辑，而页面初始渲染依赖它（比如 LCP 标题颜色），仅靠 preload + onload 可能来不及——浏览器已开始绘制，但样式还没挂载。
- 对关键视觉样式（如字体、字号、主色），仍建议内联到
的<style></style>中，控制在 2–3KB 内 - 若使用 SSR，服务端需判断是否已输出关键样式，避免客户端重复注入
- 测试时用 Chrome DevTools 的 “Disable cache” + 硬刷新，否则本地缓存会让 preload 表现失真
真正影响 LCP 的不是“有没有延迟加载”，而是“关键样式是否在首次绘制前就位”。preload 只解决下载时机，不解决样式依赖链的设计问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
