我做了个网页版网络"心电图"——NetPulse

你有没有过这种感觉：测速网站说你网速飞快，可打游戏就是一顿一顿的？问题往往不在"快不快"，而在"稳不稳"。所以我顺手写了个叫 NetPulse 的小工具，专门干一件事：盯着你的网络延迟，看它到底稳不稳。

这玩意儿说白了就是一个 HTML 文件，纯前端，没后端，打开就能用。你填个网址（默认就填的咱们站 survoid.top），它每秒去请求一次，把每次花的时间记下来，画成一条线。哪一段突然抖了、哪一段开始丢包，曲线上一眼就能看出来。

它是怎么实现的？

其实没多玄乎，核心就几块：

探测靠 fetch

每次探测就是一次 fetch 请求，配个 AbortController 做 5 秒超时。成功了就记下耗时，超时就记一次"丢包"。cache 设成 no-store，免得浏览器把结果缓存了糊弄你。

节奏和窗口

用 setInterval 每 1 秒探一次。数据存在一个数组里，最多留最近 120 个点，超了就把最老的扔掉——所以你看到的永远是最近两分钟的曲线。

画图

用 Canvas 画的。为了在高清屏上不糊，做了 devicePixelRatio 适配。丢包的点用红叉标，正常的点是蓝点，最新一个点旁边还标了具体毫秒数。

算指标

除了当前/平均延迟、最低最高，最有用的是"抖动"（jitter）。我直接用延迟的标准差来算：

jitter = √( Σ(样本 − 均值)² / 样本数 )

标准差越大，说明网络越"喜怒无常"。这比单纯看平均延迟更能解释"为啥 ping 很低但就是卡"。

自动评级

综合平均延迟、丢包率、抖动给个结论：均值<50 且零丢包且抖动小就是"优秀"；往后依次是良好、一般、较差。逻辑不复杂，就是几档 if 判断。

可选接 AI

分析区能填 DeepSeek 的 key，点"运行分析"就把统计摘要发给 AI，让它吐一段诊断。不填也能用，退回纯统计。

一个实话

它不是真正的 ping（ICMP），测的是一次 HTTP 往返，含 DNS、握手、服务端处理，所以数值会比系统 ping 偏大，但也更接近真实访问体验。另外它受浏览器 CORS 限制——跨域目标没开 CORS 头的话，fetch 会被拦，工具会误判成丢包。所以测自己站最准。

就这些。一个文件，零部署，想看网络"心跳"的时候打开挂着测十分钟，曲线不会骗你。