图片加载优先级由loading属性、src与srcset设置、是否在首屏视口内、decoding及fetchpriority属性共同决定；Chrome 107+起fetchpriority="high"可提升网络请求队列优先级，仅对<img>和<link rel="preload">生效，需配合真实src且不宜超过2–3处。
图片加载优先级由什么决定？
浏览器默认按 HTML 解析顺序加载 <img>，但实际渲染优先级不只看位置——loading 属性、src 与 srcset 的设置、是否在首屏视口内、是否设置了 decoding 或 fetchpriority，都会影响资源调度。Chrome 107+ 开始真正支持 fetchpriority，它比 loading 更底层、更直接干预 fetch 队列。
fetchpriority="high" 该用在哪些图上？
只对明确需要首屏立即呈现的图生效（比如 Hero 图、核心产品图），且必须配合真实 src（不能是 placeholder 或懒加载占位符）。它不改变渲染时机，只提升网络请求排队优先级。
-
fetchpriority="high"仅对<img>和<link rel="preload">有效，对 CSS 背景图、<picture>内部<source>无效 - 不要滥用：同一页面超过 2–3 个
fetchpriority="high"会稀释效果，浏览器可能降级处理 - 和
loading="eager"同时写没坏处，但loading="lazy"与fetchpriority="high"共存时，Chrome 仍会 lazy 加载（优先级被懒加载逻辑覆盖）
loading="lazy" 的坑和绕过方式
默认 loading="auto"（等同于未设），loading="lazy" 对非首屏图确实省带宽，但容易导致滚动时“闪白”或 CLS（布局偏移）。尤其当容器高度未预留、图片无 width/height 或 aspect-ratio 时。
- 必须为懒加载图声明尺寸：用
width和height属性（非 CSS），或用style="aspect-ratio: 4/3;"配合height: auto - 首屏图禁用
loading="lazy"—— 即使它在 DOM 后面，只要初始视口内就应 eager 加载 - 想手动触发预加载又避开懒加载？用
<link rel="preload" as="image" href="..." fetchpriority="high">，再在<img>中复用相同 URL
响应式图 + 优先级怎么配？
srcset 和 sizes 不影响优先级，但错误配置会让高优先级图实际加载低分辨率版本（浪费 high 优先权）。关键在匹配逻辑和 fallback。
立即学习“前端免费学习笔记（深入）”；
-
src必须存在，它是srcset的 fallback；缺失时，某些旧浏览器或禁用 JS 环境下图直接不显示 - 如果希望高清屏也走 high 优先级，确保
srcset中所有候选项 URL 都一致使用fetchpriority="high"（属性作用于整个<img>元素，不区分 srcset 项） - 避免在
<picture>里给每个<source>加fetchpriority—— 无效，只有最外层<img>支持该属性
复杂点在于：fetchpriority 是提示而非强制指令，不同浏览器实现程度不同；而真正影响用户体验的，往往是尺寸未预留导致的重排，不是优先级本身。
