必须按顺序检查 typeof navigator.connection !== 'undefined'、typeof conn.effectivetype === 'string'、conn.effectivetype !== 'unknown' 才能安全读取 effectivetype，否则在 safari 桌面版、旧 webview 或弱网设备上会静默失败或报 typeerror。
直接用 navigator.connection 做资源加载决策不可靠，必须先做三层防御性检查，否则在 Safari 桌面版、旧 WebView 或弱网设备上会静默失败或触发 TypeError: Cannot read property 'effectiveType' of undefined。
怎么安全读取 navigator.connection.effectiveType
浏览器支持不一致是最大陷阱：Safari 桌面版至今完全不支持，部分 Android 4.4 WebView 返回 undefined，某些低端机型即使有 connection 对象，effectiveType 也可能是 'unknown'。
- 必须按顺序检查：
typeof navigator.connection !== 'undefined'→typeof conn.effectiveType === 'string'→conn.effectiveType !== 'unknown' - 不能只写
if (navigator.connection?.effectiveType)——可选链无法拦截'unknown'这种合法字符串值 - 推荐封装成工具函数，避免重复逻辑：
function getNetworkType() {
const conn = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
if (!conn || typeof conn.effectiveType !== 'string' || conn.effectiveType === 'unknown') {
return null;
}
return conn.effectiveType;
}
effectiveType 和 downlink 怎么配合用
effectiveType 只有 5 个离散值（'slow-2g', '2g', '3g', '4g', '5g'），响应滞后明显；而 downlink 是实时浮点数（单位 Mbps），更适合做带宽阈值控制。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 例如：想在带宽 ≤ 1.2 Mbps 时禁用高清图，用
conn.downlink 比判断 <code>effectiveType === '3g'更准 - 但
downlink在 Safari 中始终为0或未定义，必须 fallback 到effectiveType或直接降级 - 不要用
downlink做动画帧率切换——它每秒更新频率低且抖动大
怎么用网络类型动态控制图片加载
仅靠 srcset + sizes 不够，需要 JS 层根据网络类型主动干预资源选择逻辑。
- 避免误用
connection.type === 'cellular'：5G 用户会被当成“蜂窝网络”一刀切禁高清图 - 正确做法是结合
getNetworkType()结果，在 JS 中动态设置img.src或img.srcset： - 比如
effectiveType为'slow-2g'或'2g'时，强制加载320w图片，并移除srcset防止浏览器覆盖 - 注意：修改
srcset后要手动触发img.decode()，否则可能不渲染
为什么不能只靠 HTML 属性实现 Connection Aware
HTML 层的 loading="lazy"、srcset、sizes 都是静态声明式机制，无法感知运行时网络变化；而 navigator.connection 的值是动态更新的，但浏览器不会自动重触发资源加载。
- 这意味着：用户从 Wi-Fi 切到地铁 4G 时，已加载的高清图不会自动降级，新滚动进来的图片也不会自动换源
- 真正可靠的方案是监听
connection.onchange事件（注意兼容性：iOS Safari 不支持），并在回调中重新评估并替换关键资源的src - 更稳妥的做法是只在页面初始化时读一次网络类型，后续依赖 Service Worker 缓存策略或 HTTP/2 服务器推送来补救
最易被忽略的一点：网络类型判断结果不是立即生效的——effectiveType 基于过去 30 秒的平滑估算，首次访问页面时它可能还是初始值 '4g'，哪怕用户正连着 2G 热点。必须接受这个延迟，别指望它做毫秒级响应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
