原子网络科技 原子网络科技

页面预加载如何配置才有效:preload 和 prefetch 的职责划分、触发时间以及带宽选择

a169kai 2026年11月04日 · 阅读约 2 分钟

预加载的作用就是在点击之前把下一步所需要的资源准备好,从感觉上来说,它的速度比压缩文件所带来的收益要大得多。

第一种是预加载,第二种是预取。预加载是指当前页面必须使用的资源,在声明之后浏览器就会尽早发起请求;而预取则是下一跳页面的资源,优先级较低,空闲的时候才会执行。两者混用,非关键资源就会抢占首屏带宽。

触发时机决定了效果。列表页的预取应该绑定在悬停或者进入视口的时候,而不是页面加载的时候就全部预取,否则几十个条目会一起发出请求。单页应用可以在路由切换之后预取相邻的模块,配合空闲回调来执行。

数量要加以控制。预取资源保持在3-5个之间,超过之后收益会减少,占用带宽;在移动网络中可以关闭预取功能,或者只在无线环境下开启。

和缓存策略一起使用才有意义。预取的资源如果命中了边缘缓存的话,跳转几乎没有延迟;没有命中的时候就会直接穿透到源站,这样反而会增加回源的压力。预取清单和缓存配置要同步维护,两者才能相互成就。

用跳转之后首屏的时间来衡量效果,如果指标没有变化就说明命中率不够。定期审查预取列表,长期没有命中过的条目应该被删除,否则预加载就会变成额外的负担。

0 0 投票数
文章评分
订阅评论
提醒
guest
0 评论
最旧
最新 最多投票