Next.js 图片交付 · 资源调度台

加载优先级规划器

先判断谁是真正的 LCP 候选,再决定何时发现、是否提前请求,以及要不要提高抓取优先级。所有图片都抢跑,最终只会让优先级失去意义。

确定性教学模型
不是浏览器网络调度器

逐张填写证据,再选择提示

当前图片的设置会立即更新建议、冲突警告、属性示意和全页资源时间线。方向键可在图片标签间移动。

课程主封面

首屏最大视觉,所有主要断点共用同一资源。

高 LCP 概率教学启发式,不是测量结果
初始视口
60%
轮播 / 隐藏分支
preload
策略判断evidence → hint
建议正在计算……
    属性意图Image props
    
                  

    关键资源竞速轨道

    横轴是教学用发现时间。条带越早不代表一定越早完成;网络、缓存和服务端响应仍会改变真实结果。

    关键通道可控正在计算资源竞争。
    资源0ms200ms400ms600ms800ms
    preload 改变发现时机它把明确资源提到 head,但不是免费带宽,也不应再叠加 loading 或 fetchPriority。
    eager 与 high 不是同一件事eager 取消懒加载;fetchPriority 只向浏览器表达相对优先级。
    多个 high 会稀释信号当所有图片都 high,浏览器仍要排队,CSS、字体和真正 LCP 还会被竞争。

    优先级挑战

    10 个单选题覆盖 LCP 证据、发现时机、互斥属性、响应式来源和资源竞争。

    已检查 0 / 10 · 答对 0

    挑战 1 / 10

    正在载入题目……

    请选择一个答案