浏览器允许的并发请求资源数是有限制的-分析

本文探讨了浏览器并发请求限制的原理及其对用户体验的影响。针对这一限制,文章介绍了多种前端优化技术,包括domainhash、cookiefree、csssprites等,以提高页面加载速度。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

开始之前,我们先看下各个浏览器公布的资源并发数限制个数,如下图

这里写图片描述

浏览器的并发请求数目限制是针对同一域名的。
意即,同一时间针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻塞,这就是很多网站专门解决这个问题的原因。

有的请求会持续很长时间,如果把 img, css, js… 都放到http://一个域名下面,其他请求就迟迟无法完成,浏览者看来就是『卡住了』。而把图片放到另一个域名之后,css和图片就可以并发请求了。

使用并发的原因

首先,是基于端口数量和线程切换开销的考虑,浏览器不可能无限量的并发请求,因此衍生出来了并发限制和HTTP/1.1的Keep alive。 所以,IE6/7在HTTP/1.1下的并发才2,但HTTP/1.0却是4。 而随着技术的发展,负载均衡和各类NoSQL的大量应用,基本已经足以应对C10K的问题。 但却并不是每个网站都懂得利用domain hash也就是多域名来加速访问。因此,新的浏览器加大了并发数的限制,但却仍控制在8以内。

补充一小点就是浏览器即使放弃保护自己,将所有请求一起发给服务器,也很可能会引发服务器的并发阈值控制而被BAN,而另外一个控制在8以内的原因也是keep alive技术的存在使得浏览器复用现有连接和服务器通信比创建新连接的性能要更好一些。

所以,浏览器的并发数其实并不仅仅只是良知的要求,而是双方都需要保护自己的默契,并在可靠的情况下提供更好的性能。

=========================================================================

前端技术的逐渐成熟,还衍生了domain hash, cookie free, css sprites, js/css combine, max expires time, loading images on demand等等技术。这些技术的出现和大量使用都和并发资源数有关。

按照普通设计,当网站cookie信息有1 KB、网站首页共150个资源时,用户在请求过程中需要发送150 KB的cookie信息,在512 Kbps的常见上行带宽下,需要长达3秒左右才能全部发送完毕。 尽管这个过程可以和页面下载不同资源的时间并发,但毕竟对速度造成了影响。 而且这些信息在js/css/images/flash等静态资源上,几乎是没有任何必要的。 解决方案是启用和主站不同的域名来放置静态资源,也就是cookie free。

将css放置在页面最上方应该是很自然的习惯,但第一个css内引入的图片下载是有可能堵塞后续的其他js的下载的。而在目前普遍过百的整页请求数的前提下,浏览器提供的仅仅数个并发,对于进行了良好优化甚至是前面有CDN的系统而言,是极大的性能瓶颈。 这也就衍生了domain hash技术来使用多个域名加大并发量(因为浏览器是基于domain的并发控制,而不是page),不过过多的散布会导致DNS解析上付出额外的代价,所以一般也是控制在2-4之间。 这里常见的一个性能小坑是没有机制去确保URL的哈希一致性(即同一个静态资源应该被哈希到同一个域名下),而导致资源被多次下载。

再怎么提速,页面上过百的总资源数也仍然是很可观的,如果能将其中一些很多页面都用到的元素如常用元素如按钮、导航、Tab等的背景图,指示图标等等合并为一张大图,并利用css background的定位来使多个样式引用同一张图片,那也就可以大大的减少总请求数了,这就是css sprites的由来。

全站的js/css原本并不多,其合并技术的产生却是有着和图片不同的考虑。 由于cs/js通常可能对dom布局甚至是内容造成影响,在浏览器解析上,不连贯的载入是会造成多次重新渲染的。因此,在网站变大需要保持模块化来提高可维护性的前提下,js/css combine也就自然衍生了,同时也是minify、compress等对内容进行多余空格、空行、注释的整理和压缩的技术出现的原因。

随着cookie free和domain hash的引入,网站整体的打开速度将会大大的上一个台阶。 这时我们通常看到的问题是大量的请求由于全站公有header/footer/nav等关系,其对应文件早已在本地缓存里存在了,但为了确保这个内容没有发生修改,浏览器还是需要请求一次服务器,拿到一个304 Not Modified才能放心。 一些比较大型的网站在建立了比较规范的发布制度后,会将大部分静态资源的有效期设置为最长,也就是Cache-Control max-age为10年。 这样设置后,浏览器就再也不会在有缓存的前提下去确认文件是否有修改了。  超长的有效期可以让用户在访问曾访问过的网站或网页时,获得最佳的体验。 带来的复杂性则体现在每次对静态资源进行更新时,必须发布为不同的URL来确保用户重新加载变动的资源。

即使是这样做完,仍然还存在着一个很大的优化空间,那就是很多页面浏览量很大,但其实用户直接很大比例直接就跳走了,第一屏以下的内容用户根本就不感兴趣。 对于超大流量的网站如淘宝、新浪等,这个问题尤其重要。   这个时候一般是通过将图片的src标签设置为一个loading或空白的样式,在用户翻页将图片放入可见区或即将放入可见区时再去载入。 不过这个优化其实和并发资源数的关系就比较小了,只是对一些散布不合理,或第一页底部的资源会有一定的帮助。 主要意图还是降低带宽费用。

总的来说,各类技术都是为了能让用户更快的看到页面进行下一步操作,但却不必将宝贵的资源浪费在没有必要的重复请求、不看的内容上。

浏览器限制并发的原因

由于 TCP 协议的限制,PC 端只有65536个端口可用以向外部发出连接,而操作系统对半开连接数也有限制以保护操作系统的 TCP\IP 协议栈资源不被迅速耗尽,因此浏览器不好发出太多的 TCP 连接,而是采取用完了之后再重复利用 TCP 连接或者干脆重新建立 TCP 连接的方法。

如果采用阻塞的套接字模型来建立连接,同时发出多个连接会导致浏览器不得不多开几个线程,而线程有时候算不得是轻量级资源,毕竟做一次上下文切换开销不小。

这是浏览器作为一个有良知的客户端在保护服务器。就像以太网的冲突检测机制,客户端在使用公共资源的时候必须要自行决定一个等待期。当超过2个客户端要使用公共资源时,强势的那个邪恶的客户端可能会导致弱势的客户端完全无法访问公共资源。从前迅雷被喷就是因为它不是一个有良知的客户端,它作为 HTTP 协议客户端没有考虑到服务器的压力,作为 BT 客户端没有考虑到自己回馈上传量的义务。

小贴士

半开连接指的是 TCP 连接的一种状态,当客户端向服务器端发出一个 TCP 连接请求,在客户端还没收到服务器端的回应并发回一个确认的数据包时,这个 TCP 连接就是一个半开连接。

若服务器到超时以后仍无响应,那么这个 TCP 连接就等于白费了,所以操作系统会本能的保护自己,限制 TCP 半开连接的总个数,以免有限的内核态内存空间被维护 TCP 连接所需的内存所浪费。

原文地址:https://www.zhihu.com/question/20474326

### 浏览器 HTTP/1 和 HTTP/2 并发请求处理机制对比 #### 一、HTTP/1.1 的并发请求处理 在 HTTP/1.1 中,浏览器通过多路复用来实现并发请求。由于 HTTP/1.1 是基于单线程模型的阻塞协议,因此每个 TCP 连接在同一时间内只能处理一个请求响应对。为了提高性能并减少延迟,浏览器通常会为同一个域名建立多个 TCP 连接来发送多个独立的请求[^1]。 然而,这种方式存在一定的局限性。例如,TCP 链接的数量受到操作系统的限制以及服务器端配置的影响。过多的连接不仅增加了资源消耗,还可能导致网络拥塞等问题。此外,在某些情况下,即使建立了额外的连接,也无法完全解决队首阻塞(Head-of-Line Blocking, HOL Blocking)现象,即当某个请求被阻塞时,后续依赖该链接的其他请求也会受到影响而延缓执行。 #### 二、HTTP/2 的并发请求处理改进 相比之下,HTTP/2 对并发请求的支持更加高效。它引入了一种称为 **多路复用** (Multiplexing)的技术,允许在一个单一的 TCP 连接上同时传输多个请求和响应流。这意味着无需像 HTTP/1.1 那样创建多个单独的 TCP 连接即可完成多项任务[^2]。 具体来说,HTTP/2 将据分割成更小的据帧,并按照优先级分配这些帧到不同的逻辑流中。这种设计使得即使部分流量因某种原因变慢或者暂停也不会影响整个通信过程中的其余部分正常运行。另外,得益于头部压缩算法 HPACK 的应用,减少了每次交互所需传递的信息量从而进一步提升了效率。 以下是两种协议下浏览器对于并发请求的一些主要区别总结: | 特性 | HTTP/1.1 | HTTP/2 | |-------------------|---------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------| | 单次连接能力 | 每个 TCP 连接仅能承载一次请求-响应对话 | 支持同一连接上的多条双向通信通道 | | 多重连接需求 | 可能需要开启多个平行的 TCP 连接以满足高吞吐率的需求 | 不再需要维持大量冗余连接 | | 据包大小优化 | 缺乏有效的头信息压缩手段 | 使用 HPACK 技术显著降低重复字段带来的开销 | | 资源竞争与公平调度 | 存在 HOL blocking 问题 | 提供更好的流控机制及自适应带宽管理 | 综上所述,相较于传统的 HTTP/1.1 方法论而言,现代化标准下的 HTTP/2 明显具备更强健灵活度更高的特性集合用于应对当今互联网环境中日益增长复杂性的挑战[^3]。 ```javascript // 示例代码展示如何利用 Axios 发起 GET 请求 (适用于任何版本 HTTP) const axios = require('axios'); (async () => { try { const response = await axios.get('https://httpbin.org/get'); console.log(response.data); } catch (error) { console.error(error); } })(); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值