fetchpriority在link rel="stylesheet"上效果有限，仅chromium 112+和safari 17.2+支持且仅影响未缓存的首次加载；更可靠的是用rel="preload" as="style"配合onload切换，强制提前加载并立即应用。
fetchpriority 在 <link rel="stylesheet"> 上不能提速，它只是个弱提示信号，且只在 Chromium 112+ 和 Safari 17.2+ 中有有限作用；多数情况下你设了 fetchpriority="high"，Network 面板里 Priority 仍显示为 Medium —— 这不是 bug，是浏览器按实际调度逻辑做的合理降级。
哪些浏览器和版本真正读取 fetchpriority on <link rel="stylesheet">
只有 Chromium 内核（Chrome/Edge 112+、Opera 98+）和 Safari 17.2+ 会解析该属性；Firefox 完全忽略，连 Network 面板的 Priority 列都不显示。更关键的是：即使在支持的浏览器中，它也仅影响“尚未缓存”的首次加载，且只对阻塞渲染的 CSS 生效 —— 如果样式表被 rel="preload" 提前声明，或已存在于 HTTP 缓存中，fetchpriority 就不会触发任何优先级调整。
fetchpriority="high" 为什么经常没变化
它受三重逻辑压制，不是“设了就升”：
- CSS 加载天然阻塞渲染，浏览器默认就给 Highest 或 High，
fetchpriority="high"往往只是确认，而非提升 - 资源已缓存时，Network 面板 Priority 显示为 Medium —— 调度器认为无需抢占带宽，不是失效
- 多个
<link rel="stylesheet">并存时，浏览器严格按 HTML 出现顺序 + 渲染依赖推导优先级，fetchpriority无法逆转这个顺序
比 fetchpriority 更可靠的关键 CSS 加载策略
直接用 <link rel="preload" as="style" href="critical.css"> 放在 最前面（紧贴 <meta charset> 后），并配 onload 行为：
<link rel="preload" as="style" href="critical.css" onload="this.onload=null;this.rel='stylesheet'">
这样能绕过 fetchpriority 的模糊性，强制提前发起请求，并确保下载后立即应用。注意：as="style" 不需要 crossorigin，但必须与最终 <link rel="stylesheet"> 的 href 完全一致（含查询参数）。
真正容易被忽略的一点：如果你的 CSS 文件体积小、路径短、且位于 CDN 上，浏览器很可能在解析 HTML 的极早期就把它拉下来了 —— 此时加 fetchpriority 不仅无收益，还可能因误导团队而掩盖更关键的问题，比如未提取关键 CSS、未内联首屏样式、或未压缩传输。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
