stalled和Initial connection偶尔请求时间长

Queueing请求排队的时间。关于这个,需要知道一个背景,就是浏览器与同一个域名建立的TCP连接数是有限制的,chrome设置的6个,如果说同一时间,发起的同一域名的请求超过了6个,这时候就需要排队了,也就是这个Queueing时间

Stalled是浏览器得到要发出这个请求的指令,到请求可以发出的等待时间,一般是代理协商、以及等待可复用的TCP连接释放的时间,不包括DNS查询、建立TCP连接等时间等
DNS Lookup DNS查询的时间,页面内任何新的域名都需要走一遍 完整的DNS查询过程,已经查询过的则走缓存
Initial Connection / Connecting 建立TCP连接的时间,包括TCP的三次握手和SSL的认证
SSL完成ssl认证的时间
Request sent/sending请求第一个字节发出前到最后一个字节发出后的时间,也就是上传时间
Waiting 请求发出后,到收到响应的第一个字节所花费的时间(Time To First Byte)
Content Download 收到响应的第一个字节,到接受完最后一个字节的时间,就是下载时间

 

 

客户端不知道当前与服务器的TCP连接已经断开,且还像去用之前的连接去请求以节省资源,但实际上已经断开,服务器会在21秒内重置信息,通知客户端链接已经断开,开启重试,直到成功。

stalled和Initial connection请求时间长的可能原因是TCP链接丢失,且暂时并未找到解决方案。

参考:http://fex.baidu.com/blog/2015/01/chrome-stalled-problem-resolving-process/

### 三级标题:浏览器请求接口时 Stalled 时间的解决方案 Stalled 时间是指浏览器在发起请求前因资源竞争、连接限制或缓存策略等原因而处于等待状态的时间。当 Stalled 时间时,会导致请求排队、页面加载变慢,影响用户体验。 浏览器对同一域名下的并发请求数有限制,Chrome 默认为 6 个并发连接[^2]。当同时发起的请求超过该限制时,后续请求将进入等待状态,表现为 Stalled 时间增加。例如,当某个接口请求耗时较(如 1 分钟)时,其他请求必须等待该请求完成释放连接后才能发送,导致整体加载时间[^3]。 #### 优化请求并发策略 可以通过域名分片(Domain Sharding)技术,将资源部署在多个子域名下,从而绕过浏览器的并发连接数限制。例如,将接口分别部署在 `api1.example.com` `api2.example.com`,这样浏览器可以为每个域名建立独立的连接池,提升并发能力[^2]。此外,升级到 HTTP/2 或 HTTP/3 可以利用多路复用(Multiplexing)特性,在单个连接上并行处理多个请求,显著减少 Stalled 时间。 #### 优化接口响应时间 对于时间阻塞的接口,应优化其响应机制。例如,可以将时间轮询(long-polling)改为 WebSocket 通信,或者采用异步处理、分段返回结果等方式,减少单个请求的阻塞时间。避免一个接口时间占用连接,有助于释放浏览器并发资源,提升整体加载效率[^3]。 #### 启用缓存策略 合理使用 HTTP 缓存机制,如 `Cache-Control` `ETag`,可以减少重复请求对服务器的压力。例如,使用 `Cache-Control: max-age=3600` 可以让浏览器缓存资源 1 小时,在此期间内无需重新请求,从而减少 Stalled 时间[^4]。对于需要验证缓存有效性的请求,使用 `If-None-Match` `Last-Modified` 可以减少完整资源传输,加快响应速度。 #### 调整服务器连接管理 服务器端应优化连接管理,避免 TCP 连接频繁建立释放。可以启用 `keep-alive` 机制,保持连接复用,减少连接建立关闭的开销。例如,在 Nginx 中可以通过以下配置启用连接: ```nginx upstream backend { server backend1.example.com; keepalive 32; } server { listen 80; location / { proxy_pass http://backend; proxy_http_version 1.1; proxy_set_header Connection ""; } } ``` 该配置允许后端连接保持复用,减少连接建立延迟,从而降低 Stalled 时间[^1]。 #### 优化前端资源加载策略 在前端层面,可以使用 `<link rel="preload"> 提前加载关键资源,提升加载优先级。例如: ```html <link rel="preload" href="api/data" as="fetch" crossorigin> ``` 这种方式可以让浏览器尽早发起关键接口请求,减少因资源依赖导致的阻塞。此外,合理使用懒加载异步加载策略,延迟非关键接口的调用,也有助于缓解请求排队问题。 ###
评论 6
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值