前端资源优先级与预加载（preload/prefetch、fetchpriority 与 103 Early Hints）

前端资源优先级与预加载（preload/prefetch、fetchpriority 与 103 Early Hints）概述合理的资源优先级与预加载可显著降低 LCP 与交互延迟。结合 Early Hints 进一步提前加载关键资源。关键实践与参数preload：`<link rel="preload" as="script/style/image" href="...">` 对首屏关键资源使用。prefetch：`<link rel="prefetch" href="...">` 预取未来可能使用的资源。- fetchpriority：在 `<img>`/`<link>` 上设置 `fetchpriority="highlowauto"`。103 Early Hints：服务器提前发送 `Link: </app.css>; rel=preload; as=style` 等头部。验证方法DevTools 观察请求优先级与时序；对比 LCP 与阻塞时间。服务器日志验证 103 Early Hints 命中与资源加载提前量。A/B 测试不同优先级策略的收益。注意事项避免过度预加载导致带宽竞争；控制数量与尺寸。与路由与渲染模式配合；避免重复加载与缓存污染。Early Hints 需服务器与 CDN 支持；兼容性评估与回退。