R3.07.4viewport-aware media loading设计
视口外的媒体延后加载，视口内的优先加载
别名: lazy loading · 视口优先 · 英雄图抢带宽 · 延后解码
概念解释
带宽和解码槽是有限的。视口里正在看的媒体应先占用它们，视口外的延后。视口感知的加载（viewport-aware loading）用 loading="lazy"、Intersection Observer 或优先级提示，把请求和 decode 排到可见性之后或之前。它管的是调度，不是文件该有多大、也不是播不播放。英雄图被标成懒加载、页脚图却立刻请求，就是优先级颠倒。
机制
浏览器对每个文档有连接数、带宽和图像解码队列。所有 <img> 都 eager 时，首屏和折页下的图抢同一条管道，首屏图的首字节被推迟。懒加载把元素进入根边距之前的请求挂起；fetchpriority="high" 或预加载则把当前视口的 LCP 候选插到队列前。正确的调度是：当前视口及一小段预滚动边距内的媒体优先，其余等待。边距太小，滚动时会看到空白等图；边距太大，又把远处的图提前拉回来，等于没懒加载。
解码同样要排期。即便字节已到，主线程或图像解码器一次只能消化有限张。视口外的图若先解码，会挤占视口内那张的完成时刻。所以“延后”包括延后请求和延后解码，不只是把 src 写晚一点。
边界
打印、分享图卡、爬虫截图往往没有“当前视口”，懒加载会导致导出缺图，需要在这些通道强制 eager。邮件 HTML 对懒加载支持不一致。无限列表若边距设过小，快速滑动会连续空白。预渲染或往返缓存恢复时，视口可能已经不在文档顶部，应按恢复后的视口而不是按页头来排优先级。视频海报可以懒，但已在视口内且即将成为 LCP 的海报不能懒。
怎么落地
- 首屏英雄图、主海报设为 eager 并提高优先级；折页下默认 lazy，预滚动边距按一到两屏而不是整页。
- 检查框架默认：有的组件把所有图设成 lazy，包括 LCP 候选，必须对首屏槽反向覆盖。
- 用优先级提示或预加载只对准当前视口的那一张 LCP 图，不要预加载一排缩略图。
- 验证：冷加载看瀑布图，首屏图的请求应早于折页下；快速滚到中部时，目标图应在进入视口前开始，且首屏 LCP 时间不应因下面的图而变差。