浏览器中的HTTP请求过程是怎么样的?🐱🚀
前瞻
HTTP协议是建立在TCP连接基础之上的，，是Web的基础。通常由浏览器发起请求，用来获取不同类型的文件，如HTML文件、CSS文件、JavaScript文件等。此外，HTTP也是浏览器使用最广的协议，因此，对于学好浏览器来说，了解HTTP协议很重要。
为什么通常在第一次访问一个站点时，打开速度很慢，当再次访问这个站点时，速度就很快了？
为什么登录过一个网站后，下次再访问这个站点时，就已经处于登录的状态了？
这一切的秘密都需要HTTP协议来解答。
浏览器端发起HTTP请求流程
👇
👇
👇
👇
👇
构建请求
首先，浏览器构建信息，构建好后，浏览器准备发起网络请求
// 请求行信息
GET /index.html HTTP1.1
查找缓存
在发送网络请求之前，浏览器会先在浏览器缓存中查询是否有要请求的文件。
。当浏览器发现。当然，如果缓存查找失败，就会进入网络请求过程了。
- 对于服务器来说，这样做有助于缓解服务器压力，提升性能
- 对于浏览器来说，这样做可以实现快速资源加载
准备IP地址和端口
因为。换句话说，也就是HTTP的内容是通过TCP的传输数据阶段来实现的。
从上图中，可以看出：
- HTTP请求的第一步是和服务器建立TCP连接
- 建立连接的信息从哪儿来？建立TCP连接的第一步就是需要准备IP和端口号
知道了建立连接的信息在哪儿，那么如何获取这些信息呢？
- 数据包是通过IP地址传输给接收端的，而IP地址仅仅只是一些数字标识，难以记忆，但使用域名就很容易记住一个网站了。因此，又出现了一个服务：。
那么，。拿到IP地址之后，就需要获取端口号了，默认情况下，如果URL没有特别指定端口号，那么HTTP协议默认为80端口。
等待TCP队列
IP地址和端口号已经准备就绪了，是不是就可以进行TCP连接了呢？
⚠不行，因为Chrome有个机制：
- ❗
- 那么也就是说，如果在同一个域名下同时有10个请求发生，其中会有4个请求会进入排队等待状态，直至进行中的请求完成。当然，如果请求数量小于6个，会直接进入建立TCP连接的步骤。
建立TCP连接
在排队等待之后，终于能和服务器建立连接了。由于HTTP协议是基于TCP连接之上的，所以这时候HTTP还没出场哦。因此，，在TCP的整个周期中，通过"三次握手"与服务器建立连接，随之进行数据的传输，然后通过"四次挥手"断开连接。
发送HTTP请求
有必要再提醒一下，HTTP是基于TCP连接之上的协议。因此，。
整个HTTP请求的请求信息被分为三个部分：
- Host
- Connection
- Cache-Control
- User-Agent
- 等等其他信息...
浏览器是如何发送请求信息给服务器的？
首先，，它包括了请求方法、请求URI和HTTP协议版本。
发送请求行，就是告诉服务器浏览器需要什么资源，最常用的请求方法就是GET请求，如直接在浏览器地址栏输入一个域名，代表着告诉服务器要GET它的首页资源。
另外一个常用的请求方法就是POST请求，它用于向服务器发送一些数据，这些数据是通过请求体来发送的。
在浏览器发送请求行命令之后，还要以请求头的形式发送一些其他的信息，把浏览器的一些基础信息告诉服务器，如包含了浏览器所用的操作系统、浏览器内核、当前请求的域名信息、浏览器端的Cookie信息等等。
服务器端处理HTTP请求流程
👇
👇
响应请求
在服务器成功收到了来自浏览器的HTTP请求后，服务器便可以根据浏览器的需要来返回数据了。
同样地，服务器向浏览器返回响应信息时，会被分为三个部分：
- Content-Type
- Connection
- Last-Modified
- Content-Encoding
- 等等其他信息...
- 返回html文件或其他相应的资源
服务器是如何返回响应信息给浏览器的？
首先。
随后，服务器会向浏览器发送响应头，响应头包含了服务器的一些信息，如服务器生成返回数据的时间、返回的数据类型等等信息。
发送完响应头后，服务器就可以继续发送响应体的数据了，通常情况下，响应头包含了HTML的内容。
断开连接
通常情况下，一旦服务器向客户端返回了请求数据，它就要关闭TCP连接了。
不过如果浏览器或者服务器在其头信息中加入了:
Connection: Keep-Alive
那么。保持TCP连接可以省去下次请求时需要建立连接的时间，进而提升资源加载速度。如网站中的图片都来自同一个站点，那么在初始化一个持久连接后，就可以复用该连接，以请求其他资源，而不需要重新再建立新的TCP连接了。
重定向
当实际输入的地址和最终打开页面的地址不一样时，说明发生了重定向。
。为什么很多站点二次打开的速度会很快？
如果第二次页面打开很快，显然是因为第一次加载页面过程中，缓存了一些耗时的数据。
那哪些数据会被缓存呢？
这两块数据会被浏览器缓存起来，相对来说，DNS缓存比较简单了，主要就是在浏览器本地把对应的IP地址和域名关联起来。
而对于页面资源缓存来说，就较为复杂了，其缓存处理过程为：
从图中的第一次请求可以看出，。通常，还需要为这个资源设置一个缓存过期时长，而，如上图中的缓存过期时间是2000秒。这也就意味着，在该缓存资源还未过期的情况下，如果再次请求该资源，会直接返回缓存中的资源给浏览器。但
简单来说，很多网站二次访问能够提升速度，是因为这些网站把很多资源都缓存在了本地，浏览器缓存直接使用本地副本来回应请求，而不会产生真实的网络请求，从而节省了时间。同时，DNS数据也被浏览器缓存了，也节约了DNS查询的时间。
登录状态是如何保持的？
通常情况下，用户打开登录页面，输入用户名和密码，点击确定按钮并触发页面脚本生成用户登录信息，调用POST方法将用户信息提交给服务器。
服务器接收到浏览器提交的信息后，查询后台，验证用户登录信息是否正确，如果正确的话，则会生成一段表示用户身份的字符串，并，然后把响应头发送给浏览器。
Set-Cookie: UID=216uad
浏览器在接收到服务器的响应头后，进行解析响应头，如果响应头中包含Set-Cookie字段时，浏览器就会把这个字段信息保存到本地。当用户再次访问时，浏览器会发起HTTP请求，但在发起请求之前，浏览器会读取之前保存的Cookie数据，并，然后浏览器再将请求头发送给服务器。
Cookie: UID=216uad
服务器在收到HTTP请求头数据后，就会查找请求头中的Cookie字段信息，当查找到包含UID=216uad的信息时，服务器查询后台，并判断该用户是已登录状态，然后生成含有该用户信息的页面数据，并把生成的数据返回给浏览器。浏览器在接收到含有当前用户的页面数据后，就可以正确地展示用户登录的状态信息了。
简单来说，。服务器端发现浏览器发送过来的Cookie后，会去对比服务器上的记录，最后得到该用户的状态信息。
总结
浏览器中的HTTP请求从发起到结束一共经历了8个阶段：
- 构建请求
- 查找缓存
- 准备IP地址和端口
- 等待TCP队列
- 建立TCP连接
- 发起HTTP请求
- 服务器处理并响应请求
- 断开连接