用浏览器实现实时网络状态可视化的小技巧

为什么你需要看到自己的网络状态

你有没有过这样的经历？视频会议卡成幻灯片，网页加载半天打不开，明明Wi-Fi信号满格，却像断了线。这时候光看图标没用，得真正“看见”网络在干什么。实时网络状态可视化，就是把看不见的数据流动变成直观的图形，让你一眼看出问题出在哪。

浏览器里也能做数据监控

很多人以为网络监控要装专业软件，其实现代浏览器本身就支持不少调试功能。打开Chrome或Edge，按F12进入开发者工具，切换到Network标签页，刷新页面，你能看到所有资源请求的时间线。但这只是静态回放，想实时监控上传下载速度，就得动手加点料。

用JavaScript获取实时网速

虽然浏览器没有直接暴露网速API，但可以通过时间差计算资源加载速度。比如，请求一个固定大小的图片文件，记录开始和结束时间，就能估算当前带宽。配合Canvas或SVG，把这些数据画成动态折线图，效果就像路由器后台的流量图一样直观。

const startTime = performance.now();
fetch('/test-1mb.jpg')
  .then(response => response.blob())
  .then(() => {
    const endTime = performance.now();
    const duration = (endTime - startTime) / 1000;
    const fileSize = 1024 * 1024; // 1MB in bytes
    const speed = ((fileSize * 8) / duration / 1024).toFixed(2); // Kbps
    console.log(`当前测速：${speed} Kbps`);
  });

结合图表库让数据更直观

手动画图太麻烦，可以引入轻量级图表库，比如Chart.js。创建一个实时更新的折线图，每秒跑一次测速请求，把结果推入数据流，页面上就会出现一条跳动的网速曲线。放在侧边栏或者新标签页，工作时瞄一眼就知道网络是否稳定。

<canvas id="networkChart" height="100"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('networkChart').getContext('2d');
const chart = new Chart(ctx, {
  type: 'line',
  data: { labels: [], datasets: [{
    label: '网速 (Kbps)',
    data: [],
    borderColor: 'rgb(75, 192, 192)',
    tension: 0.1
  }] },
  options: { animation: false, responsive: true }
});

// 每10秒更新一次
setInterval(() => {
  // 这里插入上面的测速逻辑
  // 假设得到 speed 数值
  const speed = 2450; // 示例值
  const now = new Date().toLocaleTimeString();
  chart.data.labels.push(now);
  chart.data.datasets[0].data.push(speed);
  if (chart.data.labels.length > 20) {
    chart.data.labels.shift();
    chart.data.datasets[0].data.shift();
  }
  chart.update();
}, 10000);
</script>

实际应用场景

在家办公时，把这页挂在副屏上，视频会议期间一旦网速掉下去，马上能察觉。或者给老人孩子做个简易网页，网速正常是绿色，变红就代表有问题，比教他们看路由器指示灯简单多了。甚至可以结合Web Audio API，在网速过低时播放提示音，真正做到“听感同步”。