测试服务器性能的方法：浏览器里就能搞定的小技巧

很多人以为测试服务器性能得用专业工具，其实日常用的浏览器也能帮你看出不少门道。尤其当你在开发网页、调试接口，或者发现网站突然变慢时，这些方法特别实用。

用开发者工具看请求耗时

打开 Chrome 或 Edge，按 F12 调出开发者工具，切换到 Network 标签页。刷新页面，你会看到所有资源的加载记录。重点关注那些请求时间特别长的条目，尤其是 API 接口。

点击某个请求，查看它的 Timing 详情。如果 “Waiting (TTFB)” 时间很长，说明服务器响应慢，不是网络问题，而是后端处理拖了后腿。

模拟弱网环境测稳定性

还在用正常网速测试？那就漏了真实用户的情况。在开发者工具的 Network 面板顶部，有个下拉菜单，默认是 “Online”。点开它，选择 “Slow 3G” 或 “Fast 3G”，再刷新页面。

你会发现某些接口直接超时或卡住，这说明服务器在高延迟环境下扛不住。这时候你就知道该优化接口逻辑，还是加缓存了。

用控制台跑简单压力测试

虽然不能替代 ab 或 wrk，但临时想看看接口能不能扛住并发，可以用 JavaScript 快速写个小脚本。

async function testLoad() {
  const url = 'https://your-api.com/test';
  const requests = [];
  for (let i = 0; i < 20; i++) {
    requests.push(fetch(url));
  }
  console.time('20并发请求总耗时');
  await Promise.all(requests);
  console.timeEnd('20并发请求总耗时');
}

testLoad();

把这段代码贴进 Console 执行，就能看到 20 个请求同时发出时的总耗时。如果时间暴涨，说明服务器连接池可能不够用。

观察内存和 CPU 使用情况

如果你的网页功能复杂，服务器返回的数据量大，可以打开 Performance 或 Memory 面板录一段操作流程。看看解析大量 JSON 或渲染复杂结构时，页面是否卡顿。

这背后其实是服务器返回内容不合理导致的前端压力。比如一次返回上万条数据，不如改成分页或流式加载。

利用 Service Worker 模拟响应延迟

想测试前端在服务器慢时的表现？可以在 Service Worker 里动手脚。

self.addEventListener('fetch', event => {
  if (event.request.url.includes('/api/')) {
    event.respondWith(
      new Promise(resolve => {
        setTimeout(() => {
          fetch(event.request).then(res => resolve(res));
        }, 2000); // 延迟 2 秒
      })
    );
  }
});

这样所有带 /api/ 的请求都会被强制延迟，你能直观看到加载状态、错误提示是不是友好。

这些方法不代替专业压测，但在日常开发中足够发现问题苗头。与其等用户抱怨卡，不如平时多点几下开发者工具，提前把问题揪出来。