rel="preload"是唯一能真正提升优先级的声明方式,必须置于后、前,as属性须严格匹配资源类型(如as="font"需crossorigin),否则资源不进下载队列、priority降为low。

rel 属性不是“影响”优先级,而是直接决定浏览器是否加载、何时加载、以什么优先级加载——写错值或放错位置,资源就根本不会进下载队列。
rel="preload" 是唯一能真正提升优先级的声明方式
它让浏览器在 HTML 解析到该 <link> 时立即发起请求,且默认进入 Highest 队列(前提是配置正确)。
-
rel="preload"必须出现在<meta charset>后、<title></title>前;写在里或 JS 动态插入,请求根本不会发出 -
as属性必须严格匹配资源类型:as="style"(不是"stylesheet")、as="font"(必须带crossorigin)、as="image"(不是"img"或"picture") - 路径必须准确:相对路径以 HTML 文档为基准,
href="./banner.jpg"和href="/img/banner.jpg"在不同上下文中可能解析失败 - 漏
as或写错,Priority 直接降为Low,Initiator 显示为(Other),等同于普通fetch()
rel="stylesheet" 的 fetchpriority 只是“确认”,不是“提升”
fetchpriority="high" 对 <link rel="stylesheet"> 几乎不改变调度行为,尤其在缓存命中或多个样式表并存时。
- Chromium 112+ / Safari 17.2+ 支持,Firefox 完全忽略
- CSS 天然阻塞渲染,浏览器默认就给
Highest或High,fetchpriority="high"往往只是重复确认 - 缓存命中时 Priority 显示为
Medium——不是失效,是调度器认为无需抢占带宽 - 多个
<link rel="stylesheet">并存时,顺序 + 渲染依赖决定实际执行次序,fetchpriority无法逆转 - href 含 JS 动态拼接(如
data-href被脚本替换),该属性视为无效
rel="prefetch" 和 rel="preconnect" 不参与当前页优先级竞争
它们不抢带宽、不提升当前页性能,但写错就彻底静默,连 Network 面板都看不到请求。
-
rel="prefetch"只在window.onload后、主线程空闲、网络无高优任务时才尝试发起,Priority 固定为Low;路径必须是绝对或根相对(/next.js),./next.js或//cdn.com/xxx会解析失败 -
rel="preconnect"必须配crossorigin才对跨域生效;没加就当同源处理,预连接跳过;同一域名重复声明无意义,只建一次连接 -
rel="icon"、rel="alternate"等不影响加载优先级,只服务浏览器 UI 或工具链,加fetchpriority会被浏览器静默忽略
最容易被忽略的是:浏览器对 rel 的识别发生在 HTML 解析初期,一旦错过那个窗口(比如 preload 放太靠后、as 写错、路径不全),后续所有优化动作都建立在错误前提上——Priority 显示再高,也只是假象。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











