ReactJS部署后Ajax请求响应耗时过长问题排查求助

技术栈 #

• 前端：ReactJS
• 后端：PHP（部署在服务器）

问题详情 #

• 本地开发环境（通过npm start运行在localhost）时，Ajax请求耗时约500ms
• ReactJS部署上线后，发起相同请求耗时约2.51秒
• 使用Postman测试同一请求，耗时同样约500ms

请求代码 #

$.ajax({
  type: "POST",
  url: MY_URL,
  dataType: "json",
  data: MY_DATA,
  success: function (data) {
      // do something
  }
});

排查步骤与原因分析 #

前端侧排查点 #

• 跨域预检请求：本地开发时通常会配置代理（如create-react-app的proxy）避免跨域；部署后如果前后端域名不同，浏览器会先发送OPTIONS预检请求，额外增加一次请求耗时。可在浏览器DevTools的Network面板查看是否存在OPTIONS请求并统计其耗时。
• 缓存策略差异：本地开发时浏览器可能缓存了请求结果，部署后缓存失效或缓存策略变更，导致每次都要发起全新请求。检查Network面板中请求的Cache-Control响应头，确认缓存是否正常生效。
• 页面资源阻塞：部署后的前端页面若存在未优化的大体积资源（未压缩的JS/CSS、高清图片等），会阻塞Ajax请求的发起时机。通过DevTools的Performance面板分析请求发起时间是否被其他资源加载延迟。
• 请求参数一致性：对比本地与部署环境中MY_DATA的内容，确认是否存在参数冗余、格式差异等情况，这些可能导致后端处理逻辑耗时增加。

网络与服务器侧排查点 #

• 中间层转发延迟：若前端使用CDN、后端配置了反向代理（如Nginx），中间转发环节可能产生延迟。可直接通过后端服务器IP发起请求，对比域名访问的耗时差异。
• 服务器负载情况：部署环境的服务器若CPU、内存使用率过高，会导致PHP进程处理请求变慢。使用top、htop等工具查看服务器实时负载。
• PHP配置差异：本地与部署环境的PHP配置是否一致？比如是否开启OPcache（未开启的话PHP脚本每次都要重新编译）、memory_limit是否足够、max_execution_time是否合理。
• 数据库查询效率：部署环境的数据库数据量可能更大，或查询语句缺少索引，导致后端处理请求时数据库查询耗时激增。可在PHP代码中添加日志，记录数据库查询的具体耗时。

工具辅助排查 #

• 利用浏览器DevTools的Network面板：对比本地与部署后请求的各阶段耗时（Queuing、Stalled、DNS Lookup、Initial Connection、SSL Negotiation、Request Sent、Waiting (TTFB)、Content Download），重点关注Waiting (TTFB)（服务器响应等待时间），这部分直接反映后端处理的耗时。
• 使用curl命令模拟请求：在部署环境的服务器上执行自定义格式的curl命令，输出请求各阶段耗时，对比Postman与浏览器请求的差异。

内容的提问来源于stack exchange，提问作者Ah Fook