从一次页面加载慢说起
上周上线的新功能，用户反馈点进去要等好几秒。前端同事查了接口响应时间正常，后端也说服务器没压力。问题出在哪？最后用浏览器的开发者工具抓了一下网络请求，才发现是某个第三方 JS 资源在国外 CDN 上，加载卡了两秒。这就是典型的网络性能问题——不是系统崩溃，但体验很差。
这种问题靠肉眼看不出，必须做网络性能监控。尤其在现在前后端分离、微服务架构普遍的情况下，一个页面背后可能涉及十几个请求、多个服务节点，手动排查不现实。
明确监控目标：你要看什么
别一上来就装工具。先想清楚你关心什么。常见的指标有：
- 页面首屏加载时间
- TTFB（Time to First Byte）
- 关键资源加载耗时（JS、CSS、图片）
- API 接口响应延迟
- 网络错误率（5xx、4xx）
如果是内部系统，可能更关注接口稳定性；面向用户的网站，则首屏速度直接影响跳出率。
浏览器端：利用 DevTools 和 Performance API
打开 Chrome 开发者工具的 Network 面板，刷新页面，所有请求一目了然。你可以看到每个资源的发起时间、DNS 查询、连接建立、传输耗时等细节。这是最基础也是最直接的方法。
如果想自动化采集，可以用浏览器提供的 Performance API。比如获取首屏时间：
const perfData = performance.getEntriesByType("navigation")[0];
console.log("首屏加载时间：", perfData.loadEventEnd - perfData.fetchStart);
// 输出类似：首屏加载时间： 1342把这些数据上报到日志系统，就能长期跟踪趋势。
服务端监控：Nginx 日志 + Prometheus
如果你用 Nginx 做反向代理，它的 access log 可以记录每个请求的处理时间。在配置中加入 $request_time 和 $upstream_response_time：
log_format main
'$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" $request_time $upstream_response_time';然后用 Filebeat 把日志传给 Elasticsearch，或者用 Prometheus + Grafana 搭一套可视化面板。比如监控接口 P95 延迟是否超过 800ms，超了就告警。
合成监控：用脚本模拟用户访问
真实用户行为不可控，所以得主动出击。写个 Puppeteer 脚本，定时访问核心页面：
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://your-site.com/order');
const metrics = await page.metrics();
console.log(metrics);
await browser.close();
})();把加载过程中的内存、CPU、网络请求数记下来，跑在 CI 或定时任务里，提前发现性能退化。
APM 工具：直接上手方案
不想自己搭？直接用现成的 APM（应用性能监控）工具。比如 Sentry、New Relic、阿里云 ARMS。它们提供 SDK，前端引入一段 JS，后端加个 agent，自动收集页面性能、接口调用链、异常堆栈。
Sentry 的前端监控代码长这样：
<script src="https://browser.sentry-cdn.com/7.25.0/bundle.min.js"></script>
<script>
Sentry.init({ dsn: 'your-project-dsn' });
</script>集成后，你能在后台看到每个页面的加载分布图，甚至能按地区、设备类型筛选，找出特定群体的卡顿问题。
别忘了移动端和弱网环境
公司内网测着飞快，用户在外面用 4G 加载半天。可以用 Chrome DevTools 的 Network Throttling 模拟 3G 环境，或者用 AWS Device Farm 这类服务测试真实手机上的表现。
有个项目上线前没测弱网，结果用户提交订单时，请求超时重试了三次，生成了三笔订单。后来加上了网络状态监听和防重机制，才解决。
监控不是一劳永逸
业务在变，接口在加，第三方依赖也在变。曾经有个项目接入了一个统计 SDK，它会在每次路由变化时发一个同步请求，导致页面跳转卡顿。这种“暗坑”只能靠持续监控才能发现。
定期看一眼性能仪表盘，比出问题后再救火强得多。