Angular2+RxJS项目Chrome中缓存请求排队1-3秒延迟问题求助

这绝对不是正常现象——缓存加载的资源本该几乎瞬间完成，更别说第一个请求还长期处于pending状态了。结合你用Angular 2 + RxJS的场景，咱们拆解下可能的核心原因：

1. 浏览器HTTP连接池被占满（HTTP/1.x限制） #

如果你的项目还在使用HTTP/1.x，浏览器对同一域名的并发请求数有默认限制（一般是6个）。如果当时页面有其他请求（比如API接口、其他静态资源）占满了连接池，后续的缓存请求就只能排队等连接释放。

注意：哪怕是缓存资源，如果浏览器需要发送缓存验证请求（比如带If-None-Match/If-Modified-Since），还是会占用连接池名额，这时候如果服务器响应慢，就会导致pending和排队。

2. RxJS的请求调度或订阅时机出问题 #

你用了RxJS，得排查下两个请求的订阅逻辑：

• 第一个请求的Observable是不是被延迟订阅了？比如放在了某个异步回调里，或者用了async调度器导致延迟执行？
• 有没有依赖关系？比如第二个请求是在第一个请求的回调里触发的，但第一个请求因为某种原因一直处于pending（比如没订阅、操作符阻塞），导致第二个请求被迫排队？
• 有没有用concatMap这类串行执行的操作符？如果是，第二个请求必须等第一个完成才会发送，但第一个pending的话，第二个自然会排队。

3. 缓存策略配置不合理 #

虽然显示是从缓存加载，但缓存头的配置可能有问题：

• 比如设置了Cache-Control: no-cache或must-revalidate，浏览器每次都会向服务器验证资源是否过期，如果服务器响应慢，就会导致请求pending；
• 两个资源的缓存策略可能不一样：textMaskCore.js的缓存头允许直接从本地取，而defaultCCMAFamilyMap.json需要验证，所以排队时间更长。

你可以在Network面板里查看两个资源的Response Headers，对比Cache-Control、ETag、Last-Modified这些字段。

4. Angular HTTP拦截器阻塞请求 #

有没有自定义的HTTP拦截器？如果拦截器里有同步/异步的阻塞逻辑：

• 比如同步等待某个全局状态（比如用户token加载）；
• 或者做了复杂的日志、加密操作，导致请求被延迟发送；
  这种情况下，第一个请求卡在拦截器里，后续请求也会被拦截器的队列阻塞，出现排队延迟。

5. 浏览器主线程被阻塞 #

浏览器的网络请求调度是在主线程处理的，如果当时主线程有长任务（比如大量JS计算、DOM渲染），会导致请求调度被延迟：

• 比如页面正在渲染复杂组件、执行大循环，主线程被占满，网络请求只能排队等主线程空闲；
• 你可以打开DevTools的Performance面板，记录加载过程，看看有没有红色的长任务块，这会直接导致请求排队。

排查建议 #

• 先看Network面板的Timing详情：每个请求的排队时间到底花在哪个阶段（Queuing、Stalled、DNS Lookup等），这能直接定位方向；
• 临时勾选Disable cache重新加载，看延迟是否消失——如果消失，说明是缓存验证的问题；
• 检查RxJS订阅逻辑：第一个请求的Observable是否及时订阅？有没有用串行操作符导致阻塞？
• 禁用自定义HTTP拦截器，测试延迟是否消失；
• 用Performance面板排查主线程阻塞情况。

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