网络性能监控怎么做：实用方法与工具推荐

从网页加载慢说起

你有没有遇到过这种情况：开发好的网页在本地跑得好好的，一上线就卡得不行？用户抱怨图片加载半天，接口响应像蜗牛。这时候光靠猜没用，得靠数据说话——网络性能监控就是干这个的。

明确监控目标

别一上来就装工具。先想清楚你要看什么。是首屏时间太长？还是某个API经常超时？常见的指标有页面加载时间、HTTP请求状态、资源大小、DNS解析耗时、TCP连接时间等。比如你做的是电商后台，那订单查询接口的响应时间就得重点盯着。

浏览器自带的利器

打开Chrome开发者工具，Network面板就是最基础的监控入口。刷新页面，所有请求一目了然。你可以看到每个资源的加载阶段耗时，还能模拟弱网环境测试体验。比如把网络调成Slow 3G，看看用户在地铁里点开页面到底多煎熬。

代码里埋点更灵活

想自动收集性能数据？用Performance API就行。比如监听页面加载关键节点：

const perfData = performance.getEntriesByType('navigation')[0];
console.log('DNS查询耗时：', perfData.domainLookupEnd - perfData.domainLookupStart);
console.log('TCP建立时间：', perfData.connectEnd - perfData.connectStart);
console.log('首字节等待时间：', perfData.responseStart - perfData.requestStart);

把这些数据上报到日志系统，就能批量分析问题了。

用开源工具搭监控平台

小团队不想买商业服务，可以用Prometheus + Grafana组合。配合Blackbox Exporter，能定时探测你的API接口是否可访问、响应多快。配置个探针任务很简单：

modules:
  http_2xx:
    prober: http
    timeout: 5s
    http:
      method: GET

再在Prometheus里加个job，定期抓取结果。Grafana画个图表，谁都能看得懂趋势变化。

真实用户监控不能少

实验室数据再准，也不如真实用户反馈来得直接。可以在页面底部加一段轻量脚本，收集FP（首次绘制）、FCP（首次内容绘制）、LCP（最大内容绘制）这些核心指标。比如：

import { onCLS, onFCP, onLCP } from 'web-vitals';
onFCP((data) => {
  // 上报到自己的服务器或打日志
  console.log('首次内容绘制：', data.value);
});

这样你才知道大部分用户实际体验如何。

选工具别盲目跟风

市面上的APM工具很多，New Relic、Datadog功能强，但贵。如果你只是维护几个内部系统，用ELK（Elasticsearch+Logstash+Kibana）收集Nginx访问日志也能看出不少门道。关键是根据团队规模和需求来选，别为了用高级功能而增加维护成本。

网络性能监控不是一次性的任务，而是持续观察、发现问题、优化上线的循环。哪怕每天花十分钟看一眼关键指标，也能避免很多线上事故。