网络状态与连接质量

功能

• 当前在线状态，以及进入页面后 online / offline 的每一次切换与总次数
• ⚠️ 明说 navigator.onLine 只表示「有网络接口」，连着一个没有出口的 Wi-Fi 时它照样报在线
• connection 的估算类型 / 估计下行带宽 / 估计往返延迟 / 省流量模式，每项都标注「估计值，不是实测」
• ⚠️ Firefox 与 Safari 不提供 connection 时直接说明，不显示空白或 0
• 本页的加载阶段：DNS、TCP、TLS、TTFB、内容下载、DOMContentLoaded、load
• 某个阶段为破折号时说明原因（DNS 命中缓存、连接被复用、不是 https），而不是写 0
• 资源按类型分组：条数与体积合计，并能重新统计（资源是陆续加载的）
• ⚠️ 跨域资源拿不到体积时单列条数并从合计里排除，并说明总量一定偏小
• 最慢的几个资源与整份快照的一键复制；全部本地读取，不联网

使用方法

1. 进页面就能看到在线状态、本页的加载阶段与资源统计
2. 想看切换历史就断开再连上网络：每一次都会记进「在线状态」那一块（只在内存里记，刷新即清空）
3. 连接信息一栏如果写着「不提供」，说明这个浏览器没有实现 connection，换 Chrome 或 Edge 才有
4. 点「重新统计」刷新资源列表；点「复制」取走整份快照

常见问题

为什么不做一个测速或 ping？

因为那会在别人的网络里产生流量，也不是本站的做法。这一页读的全是浏览器本来就已经记录下来的信息：页面自己加载用了多久、加载了哪些资源、当前是哪个网络类型。想看真实带宽请用专门的测速站，那不是这里要冒充的事。

为什么下载带宽那一项写着「估计值」？

因为 `navigator.connection.downlink` 是浏览器按历史吞吐推算的，不是实测：网速刚变化时它是滞后的，而且它是单个连接的估计。把它当成实测带宽会得出错误结论，所以每一项旁边都标了它的真实身份。

为什么总传输体积看起来很小？

因为跨域资源默认拿不到体积：对方没有返回 `Timing-Allow-Origin` 时，`transferSize` 是 0。本页把这些条目单列出来并从合计里排除，所以「总量」必然偏小。要看真实体积得在开发者工具的 Network 面板里。

为什么没有 connection 数据？

因为 `navigator.connection` 是个非标准接口，Firefox 与 Safari 长期拒绝实现。这是浏览器选择的结果，不是网络有问题 —— 换 Chrome 或 Edge 就能看到。