Fetch Priority API 资源加载优先级优化实践

Fetch Priority API 资源加载优先级优化实践概述Fetch Priority 提供对资源获取优先级的显式信号。`fetchpriority` 属性可用于 `<img>`/`<link rel="preload">`/`<script>`，并可通过 JS 访问对应的 `fetchPriority` 属性（HTMLImageElement/HTMLLinkElement）。关键参数/概念（已验证）`<img fetchpriority="high">`：提升关键 LCP 图像加载优先级。`<link rel="preload" as="image" fetchpriority="high">`：配合预加载提前发现并提升优先级。JavaScript：`link.fetchPriority = 'high'` 或 `img.fetchPriority = 'low'`。实践/示例关键图像优化：<link rel="preload" as="image" href="/hero.jpg" fetchpriority="high"> <img src="/hero.jpg" width="1200" height="800" fetchpriority="high" alt="Hero"> 脚本优先级调整（异步脚本场景）：const preloadLink = document.createElement('link') preloadLink.rel = 'preload' preloadLink.as = 'script' preloadLink.href = '/app.async.js' preloadLink.fetchPriority = 'high' document.head.appendChild(preloadLink) 验证方法采集 LCP 与资源水位，验证设置高优先级后首屏时间缩短。对比仅 preload 与 preload+fetchpriority 的差异。注意事项优先级仅为浏览器提示，具体实现依赖内核策略；仍需结合 preload、defer 与资源体积控制。避免将非关键资源设为高优先级，防止争夺带宽影响关键渲染路径。参考资料MDN：HTML 属性 fetchpriority、HTMLImageElement.fetchPriority、HTMLLinkElement.fetchPriorityweb.dev：Optimize resource loading with the Fetch Priority API