网络差的时候怎么智能预加载资源？

文阁提问于 2026-03-09 21:55:18 阅读 12

优化

我在做移动端页面优化，想根据用户的网络状态决定是否预加载下一页的图片。用了 navigator.connection.effectiveType 判断，但在低端机上效果不稳定，有时网速明明很慢却还是触发了预加载，导致卡顿。

我试着用 CSS 的 media query 配合 prefers-reduced-data，但好像没生效？比如下面这段：

@media (prefers-reduced-data: reduce) {
  .preload-image {
    display: none;
  }
}

是不是这个特性支持太差？有没有更靠谱的 JS + 网络感知的预加载方案？

我来解答赞 1 收藏

反馈

1 条解答

熙恩 Lv1

移动端网络检测确实是个头疼的问题，navigator.connection确实不太靠谱，特别是一些国产定制ROM。prefers-reduced-data的支持度更惨，目前基本就是个摆设。

我建议搞个更实在的混合方案：
1. 先用navigator.connection.effectiveType做初步判断
2. 自己实现个简单的网络测速，比如用一个小文件做下载测速
3. 结合历史网络状况做决策

给个实际的代码示例：

let lastSpeed = 0;

const testFileUrl = 'https://your-cdn.com/small-test-file.jpg';



async function checkNetworkSpeed() {

  try {

    const start = Date.now();

    const res = await fetch(testFileUrl, {cache: 'no-store'});

    const blob = await res.blob();

    const speed = blob.size / ((Date.now() - start) / 1000);

    

    // 平滑处理

    lastSpeed = lastSpeed ? (lastSpeed * 0.7 + speed * 0.3) : speed;

    return lastSpeed;

  } catch(e) {

    console.error('测速失败', e);

    return 0;

  }

}



// 使用示例

const speed = await checkNetworkSpeed();

if(speed > 500 * 1024) { // 大于500KB/s才预加载

  preloadImages();

}

几个实践经验：
1. 测速文件要小（建议50-100KB），放CDN上
2. 加个缓存策略避免频繁测速
3. 对于特别低端的设备，可以直接用内存/CPU信息兜底判断
4. 记得加个最大重试次数，别卡死在测速上

这套方案我们在海外项目实测过，比单纯用API靠谱多了。虽然要多发个请求，但总比把用户搞卡死强。

2026-03-09 22:03