关键CSS不能只靠，因为浏览器会阻塞HTML解析与渲染，直至其下载并解析完成；若文件体积大、路径深或跨域（如CDN），易致数百毫秒白屏。
为什么关键CSS不能只靠？
浏览器遇到普通 时，会暂停 HTML 解析、阻塞渲染，直到 CSS 下载并解析完成。但如果这个 CSS 文件体积大、路径深、或跨域（比如 CDN 上的公共样式），首屏就可能白屏几百毫秒甚至更久。Resource Hints 不是替代它，而是提前“打招呼”，让浏览器在解析 HTML 的同时就开始拉取。
preload 必须搭配 as="style" 和 media 条件
直接写 是无效的：浏览器不知道怎么处理这个资源，也不会设置正确的请求头或优先级。
- 必须加
as="style"，否则浏览器按fetch处理，不参与 CSSOM 构建流程 - 若 CSS 有媒体查询（如仅打印用），需同步声明
media属性，否则预加载后也不会被应用： - 如果 CSS 是同域且无 CORS 限制，
crossorigin可省；但若托管在 CDN 或 S3 上，多数情况需显式加crossorigin="anonymous"，否则可能触发 CORS 错误并中断解析
别把 preload 和 prefetch 混用
常见错误是把关键 CSS 写成 rel="prefetch" —— 这会让浏览器等到空闲时才下载，完全错过首屏时机。而 preload 是高优先级、立即发起的请求。
-
preload：当前页面马上要用 → 浏览器在 HTML 解析阶段就启动请求 -
prefetch：用户「可能」点进下一个页面 → 浏览器在当前页加载完成后才悄悄下载，不抢带宽 - 实测中，把关键 CSS 从
prefetch改为preload+as="style"，LCP 平均提前 300–600ms（4G 网络下）
如何验证是否生效？
打开 Chrome DevTools → Network 面板，过滤 main.css，看它的 Initiator 列是否显示 preload，且 Timing 中的 Start Time 是否早于 document.write 或 parse HTML 时间点。如果显示 Other 或延迟出现在 JS 执行之后，说明 as 缺失或路径写错。
还要检查控制台有没有类似 Failed to find a preload matching the provided criteria 的警告 —— 这通常意味着 as 类型与实际响应 MIME 不匹配（比如服务器返回了 text/plain 而不是 text/css）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
