PHP7 LAMP后端API在Angular9前端调用时耗时异常排查求助

我的网页架构分为两部分：

• 后端：基于PHP7的LAMP栈，仅提供REST API接口，无前端模板
• 前端：基于Angular9，与后端部署在同一服务器，API位于前端域名的子域名下

后端的logged-in端点在REST API客户端中调用时耗时不足10ms，我通过添加Server-Timing响应头验证了这一点（计时从后端public目录下index.php的第一行开始，到响应发送前结束），响应Payload仅为不足100字节的JSON对象。

前端已通过生产参数构建，未运行Angular内置服务器，也未添加--watch参数。但当前端调用该API端点时，浏览器控制台Timings标签显示耗时长达800ms，其中waiting阶段耗时占比极高。我使用的是@angular/common/http中的HttpClient库，怀疑其效率问题，但考虑到页面共四个请求（两个OPTIONS、一个GET及该请求），又觉得浏览器计时可能存在误导，想请教：

1. 这个10ms的请求为何在浏览器中耗时剧增？
2. waiting阶段的耗时来源是什么？

1. 浏览器端耗时剧增的核心原因 #

后端的10ms计时仅覆盖服务端内部处理逻辑，但浏览器Timings统计的是从请求发起（含前端准备请求、建立连接、等待服务端响应、接收响应）的完整链路，两者统计范围完全不同，这是耗时差异的核心。

2. Waiting阶段的主要耗时来源 #

Waiting阶段（即TTFB，首字节响应时间）的耗时通常来自以下环节：

• 跨域预检（OPTIONS请求）：如果logged-in请求触发了跨域预检（比如携带自定义请求头、使用非简单请求方法），浏览器会先发送OPTIONS请求验证权限，这个过程的往返耗时会被关联到后续实际请求的Waiting阶段；即使后端处理OPTIONS很快，网络往返、服务器连接队列等待都会增加整体耗时。
• TCP连接建立/复用问题：子域名属于不同源，浏览器会为其建立单独的TCP连接。首次请求需完成TCP三次握手；若连接池无可用连接，需等待新连接建立，这部分时间会被计入Waiting阶段。
• 服务器连接队列阻塞：LAMP栈的Apache或Nginx若处于高负载状态，请求可能在服务器连接队列中等待，直到有空闲的PHP-FPM进程处理。你的后端计时从index.php第一行开始，队列等待时间不会被计入那10ms，但会被浏览器的Waiting阶段统计。
• DNS解析延迟：即使是同一服务器的子域名，首次访问时浏览器可能需要做DNS解析，这部分耗时会被算入Waiting阶段（本地缓存后会消失）。
• Angular HttpClient预处理逻辑：如果你的请求配置了HTTP拦截器（比如注入token、日志统计），拦截器中的同步/异步逻辑可能增加请求发起前的准备时间，这部分会被浏览器统计到Waiting阶段的前期。

3. 排查建议 #

• 查看浏览器Network面板的Timings详情：如果请求发送后立即进入Waiting，大概率是服务端队列或连接问题；如果请求发送前有延迟，可能是前端拦截器或跨域预检导致。
• 直接在浏览器地址栏访问logged-in接口URL：对比Timings耗时，若耗时正常，说明是前端请求触发的额外逻辑（跨域、拦截器）导致；若仍然慢，说明是服务器或网络层面问题。
• 检查服务器状态：查看Nginx/Apache日志、PHP-FPM进程数，确认是否存在请求排队、进程不足的情况。
• 禁用Angular HTTP拦截器：测试请求耗时，排除拦截器带来的影响。

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