Priority Hints 与资源加载治理：fetchpriority 实战

概览Priority Hints 为浏览器提供开发者提示以调整获取优先级，配合 `preload`、`preconnect` 等策略可更稳定地控制关键资源的加载顺序与竞争关系。HTML 用法<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<img src="/list.webp" width="600" height="400" fetchpriority="low" alt="list">

JavaScript 用法const img = new Image()

img.src = '/card.webp'

img.fetchPriority = 'low'

document.body.appendChild(img)

实战要点仅为首屏必需资源设置高优先级，避免挤压其他关键下载。与 `preconnect` 协同，为跨域关键资源提前建链。通过性能指标（LCP/INP）与网络追踪验证策略效果。参考资料Priority Hints: https://developer.chrome.com/docs/web-platform/priority-hints/MDN link preload: https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/preload