如何优化HTML组件在不同网络状况下的加载-html教程-PHP中文网

结论是不能靠猜网络类型，浏览器不暴露4g/wifi状态；真正可用的是connection.effectivetype与picture/srcset组合加js动态降级策略。

如何优化html组件在不同网络状况下的加载

直接说结论：不能靠猜网络类型，浏览器不暴露 4G/WiFi 状态；真正能用的，是 connection.effectiveType + picture/srcset 组合，再配合 JS 动态降级策略。

为什么不能用 navigator.onLine 或 network type 判断

很多开发者第一反应是监听 navigator.onLine，但它只反映「是否连上网络」，不是「网速快慢」；而 navigator.connection.type 在 Chrome 和 Edge 中已被废弃，Safari 从未支持，Firefox 仅返回 unknown。实际测试中，navigator.connection.effectiveType 是唯一稳定可用的信号，它返回 'slow-2g'、'2g'、'3g'、'4g' 四种值（注意：没有 'wifi'）。

effectiveType 基于 RTT 和下行带宽估算，由浏览器主动维护，无需权限
它默认每 10 秒更新一次，可监听 change 事件响应变化
首次访问时可能为 undefined，需 fallback 到默认质量

用 picture + srcset 实现图片自动适配

静态资源层面，picture 元素才是应对网络波动的主力，srcset 单独用只能解决分辨率/像素密度问题，无法按网速选图。

必须用 media 属性结合 effectiveType 的值做条件匹配——但注意：picture 的 media 不支持 JS 表达式，所以得靠 JS 动态切换 source 的 srcset
推荐结构：一个 picture 容器，内含多个 source，每个 source 对应一种 effectiveType，并用 data-effective-type 标记，JS 根据当前值激活对应 source
img 标签的 src 必须保留，作为所有浏览器都支持的兜底 fallback

示例：

<picture id="hero-img"><source data-effective-type="slow-2g" srcset="hero-200w.webp 200w, hero-400w.webp 400w"><source data-effective-type="2g" srcset="hero-400w.webp 400w, hero-800w.webp 800w"><source data-effective-type="3g" srcset="hero-800w.webp 800w, hero-1200w.webp 1200w"><source data-effective-type="4g" srcset="hero-1200w.webp 1200w, hero-1920w.webp 1920w">
  @@##@@
</source></source></source></source></picture>

JS 动态切换 + 首屏文本保底

光靠 HTML 结构不够，必须用 JS 拿到 effectiveType 后主动切换 source 并触发重新加载。这里容易踩三个坑：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

不能等 DOMContentLoaded 再执行——弱网下这个事件可能延迟数秒，首屏图片已错失最佳加载时机
切换 source.srcset 后，必须手动调用 img.src = img.src 强制浏览器重新解析（否则旧缓存会继续用）
首屏文本元素（<h1></h1>、<p></p>）必须写死在 HTML 最前面，且带内联 font-size 和 color，否则 JS 还没跑完，用户看到的就是白屏或骨架屏

关键代码片段：

const pic = document.getElementById('hero-img');
const img = pic.querySelector('img');
const sources = pic.querySelectorAll('source');

function updateImageByNetwork() {
  const type = navigator.connection?.effectiveType || '4g';
  const targetSource = Array.from(sources).find(s => s.dataset.effectiveType === type);
  if (targetSource) {
    img.srcset = targetSource.srcset;
    img.src = img.src; // 触发重载
  }
}

// 页面加载早期就执行，不等 DOMContentLoaded
if ('connection' in navigator && 'effectiveType' in navigator.connection) {
  updateImageByNetwork();
  navigator.connection.addEventListener('change', updateImageByNetwork);
}