rel="preload"必须严格匹配as属性且配合onload切换rel才能生效，漏写as="style"或错误设置会导致低优先级加载；关键css需preload+stylesheet双标签并降级，否则白屏或重复请求。
rel="preload"不加as="style"等于没写
浏览器靠 as 属性决定请求优先级、缓存分区和 CORS 策略。漏写或错写（比如写成 as="fetch" 或 as="stylesheet"）会导致资源被当作低优先级 fetch 处理，Network 面板里 Priority 显示 Low，实际加载时机和不加一样。
必须严格匹配：as="style" 只能用于 CSS 文件，且后续必须配合 rel="stylesheet" 才能生效。
-
as="font"必须同步加crossorigin，否则同域字体也会被丢弃 -
as="script"若后续有同 URL 的<script src></script>，能复用缓存；但若带integrity，preload 也得带上，否则不匹配
只对首屏强依赖的 CSS 使用 preload
关键 CSS 指渲染首屏内容必需的最小样式集合，比如 main.css、theme.css。非关键 CSS（如 print.css、dark-mode.css）加了反而挤占连接池，还可能触发重复请求。
常见错误是把所有 <link rel="stylesheet"> 都替换成 preload，结果样式根本不应用——因为 preload 只下载，不解析也不挂载。
- 必须保留原有
<link rel="stylesheet" href="critical.css">标签 - preload 的
href必须和 stylesheet 的href完全一致（包括查询参数，base.css?v=1.2和base.css?v=1.3视为不同资源） - 避免对已启用 HTTP/2 Push 的资源再 preload，语义重叠易引发竞态或重复传输
preload 后必须 onload 切换 rel，否则 CSS 永远不生效
rel="preload" 的语义是“提前取货”，不是“立刻上架”。哪怕文件已下载完成，只要 rel 还是 preload，浏览器就不会解析规则、不会参与渲染——页面照样白屏或错乱。
正确做法是内联 onload 并立即清除回调：
<link rel="preload" href="/css/critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
-
this.onload=null必须写在最前，防止 Safari 或某些 Service Worker 场景下重复触发，导致样式闪烁 - 别写成外部函数调用（如
onload="loadCSS()"），增加执行延迟和作用域风险 - 不要额外再写一个
<link rel="stylesheet" href="critical.css">，否则 Chrome 会发起两次请求（尤其路径稍有差异时）
必须配
Safari 11.1+、Chrome 50+ 支持 preload，但 IE 全系、部分 Android WebView 完全忽略它。如果只靠 preload + onload，无 JS 环境下样式彻底丢失。
降级方案必须写在 里，且紧随 preload 标签之后：
<noscript><link rel="stylesheet" href="/css/critical.css"></noscript>
- 路径必须和 preload 的
href完全一致（包括查询参数） - 别用
document.write或动态appendChild插入，可能阻塞渲染或被浏览器忽略 - 验证是否真生效，别只看 Network 面板：检查
Priority是否为Highest，并确认样式表是否成功挂载到document.styleSheets
最容易被忽略的是 as 值与资源类型的严格对应，以及 onload 中 this.onload=null 的位置。这两个点一旦出错，preload 就退化成无效标签，既不提速，也不报错，排查起来特别隐蔽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
