fetchpriority属性支持high、low和auto三个值，其中auto为默认值；high用于首屏关键图，low适用于折叠区或装饰性图片，auto则由浏览器基于启发式规则自动判断。
fetchpriority属性支持哪些值
fetchpriority 是 <img> 标签的原生属性，用于向浏览器提示该图片的加载优先级。它只接受三个字符串值：high、low 和 auto（默认）。浏览器会据此调整资源调度顺序，但不强制——最终仍由浏览器内部策略决定是否采纳。
-
high：适用于首屏关键图（如 banner、产品主图），通常会提前发起请求，可能抢占其他非关键资源带宽 -
low：适合折叠区、延迟加载区域或装饰性图片，浏览器大概率推迟其 fetch，甚至等空闲时才拉取 -
auto：默认行为，浏览器基于位置、尺寸、是否在视口内等启发式规则自行判断，无需显式设置
什么时候加 fetchpriority=high 反而没用
加了 fetchpriority="high" 却没提速？常见于以下场景：
- 图片不在 HTML 初始渲染流中（比如通过 JS 动态插入的
<img>），此时属性已晚于浏览器资源发现时机 - 图片 URL 无效或响应极慢（如 404、超时），优先级提示失去意义
- 页面已存在大量
high图片（尤其首屏堆了 5+ 张），浏览器会降权处理，避免阻塞关键 JS/CSS - 使用了
loading="lazy"—— 二者冲突：loading="lazy"明确延迟加载，fetchpriority="high"却要求提前加载，浏览器通常以loading为准，忽略fetchpriority
和 loading、decoding 属性怎么配合
单靠 fetchpriority 不足以优化图片体验，需结合其他属性协同生效：
-
loading="eager"（默认） +fetchpriority="high"：适合首屏核心图，确保尽早 fetch 并解码 -
loading="lazy"+fetchpriority="low"：双重保险，既延迟 fetch 又降低调度权重，省带宽 -
decoding="async"：对大图（尤其 >1MB）建议加上，避免解码阻塞主线程；与fetchpriority无直接关系，但常一起出现 - 不要给
srcset或picture内的<source></source>设fetchpriority—— 它只作用于<img>元素本身
Chrome DevTools 里怎么验证是否生效
打开 Chrome DevTools → Network 面板 → 刷新页面 → 筛选 Img 类型 → 查看每张图的 Priority 列：
- 显示
High/Low/Medium：说明浏览器接受了你的提示（Medium是auto的实际映射） - 显示
Very Low：可能是被标记为 offscreen 或触发了浏览器内部降级逻辑（如内存压力大） - 右键某图片 → “Capture HAR with content” → 在 HAR 文件中搜索
priority字段，可确认请求头是否携带对应 hint - 注意：Firefox 和 Safari 当前（2024）尚未支持
fetchpriority，设了也无效
真正起效的前提是图片在 HTML 中静态存在、URL 可访问、且未被其他加载策略覆盖。优先级不是魔法开关，而是给浏览器的一个小纸条——写得清楚，它才更可能照做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
