02 HTTP的请求流程

436 阅读6分钟

HTTP协议是一种建立在TCP协议基础上的,允许浏览器向服务器获取资源的一种协议,是web的基础。

如果你在浏览器地址栏输入juejin.cn/user/396241…,浏览器会执行哪些操作呢?让我们一起来追踪一下。

1. 构建请求

首先,浏览器会构建请求行,之后开始准备发起网络请求。

GET /index.html HTTP1.1 

2. 查找缓存

浏览器缓存是一种在本地保存资源副本,以供下次请求时直接使用的技术。

发起网络请求之前浏览器会先在浏览器缓存中查找是否有要请求的文件,当它发现请求的资源已经在浏览器缓存中存有副本,它会拦截请求,返回该资源的副本,然后直接结束请求。这样做的好处有:

  • 缓解服务器压力,提升性能
  • 对于网站,缓存是实现快速加载资源的重要组成部分

缓存查询失败,就会进入网络请求阶段。

3. 准备IP地址和端口号

3.1 HTTP和TCP的关系

浏览器使用HTTP作为应用层协议,用来封装请求的文本信息。

使用TCP/IP作为传输层协议将它发送到网络上。

所以在HTTP进行工作之前,浏览器要先通过TCP与服务器建立连接(HTTP进行网络请求的第一步,而建立TCP连接的第一步就是获取IP地址和端口号)

HTTP 的内容是通过 TCP 的传输数据阶段来实现的

HTTP和TCP关系示意图:

2-1.png

3.2 获取IP地址和端口号

IP地址和端口号怎么获取呢?

通过URL.

输入URL向服务器发起网络请求之前,浏览器先向DNS发起请求获得域名对应的IP(DNS:域名解析系统,用于建立域名和IP的映射关系),再向该IP和指定的端口发起网络请求。如果没有指定端口,就使用HTTP协议默认的端口80。

DNS分为两种:本地DNS和云端,请求的时候会先在本地查找,本地没有找到才会去云端查找。

如果某个域名已经解析过了,浏览器会缓存解析的结果,这样会减少一次网络请求

4. 等待TCP队列

Chrome有个机制,同一域名同时最多只能建立6个TCP连接。多余的请求会进入排队进行等待状态,直到进行中的请求完成。

5. 建立TCP连接

排队等待结束之后,就可以和服务器进行三次握手建立连接了,参考上一节01 Web 世界中的 TCP/IP 是如何工作的 - 掘金 (juejin.cn)

6. 发送HTTP请求

建立连接之后,浏览器就可以和服务器进行通信了,而HTTP的数据就是在这个过程中进行传输的

HTTP请求数据的格式:

2-2.png

首先浏览器会向服务器发送请求行,告诉服务器需要什么资源,它包含了请求方法,请求的URL,和HTTP版本协议

随后浏览器会接着发送请求头,把浏览器一些基础的信息告诉服务器。比如使用的操作系统、浏览器的内核、当前请求的域名信息、浏览器端的Cookie信息等

7. 服务器端处理处理HTTP请求流程

HTTP的请求信息被送往服务器后,服务器会根据浏览器的请求信息准备对应的内容

7.1 返回请求

服务器处理浏览器请求结束后,就开始返回信息给浏览器了

2-3.png 服务器首先会返回响应行,包括协议版本和状态码,不是所有的请求都会被服务器所处理,遇到一些出错无法处理的信息,服务器会通过状态码来告诉浏览器的处理结果。

之后浏览器会返回响应头,包含了服务器自身的一些信息,比如服务器生成返回数据的时间、返回数据的类型,以及服务器要在客户端保存的Cookie信息

最后发送响应体通常包含HTML的实际内容

7.2 断开连接

一般来说,服务器向客户端返回了响应数据之后,就要断开TCP连接。但是浏览器或者服务器加入了Connection:Keep-Alive那么TCP在发送完之后仍然保持连接状态,这样浏览器就可以继续通过同一个TCP连接发送请求,保持 TCP 连接可以省去下次请求时需要建立连接的时间,提升资源加载速度

7.3 重定向

如果服务器返回的状态码是301,它会重定向到响应头中的Location地址

8. 问题汇总

8.1 为什么很多站点第二层次打开速度很快

主要原因是第一次加载站点的时候,缓存了一些耗时的数据。其中DNS和页面资源缓存是会被浏览器缓存的。

浏览器缓存处理的过程:

2-4.png

服务器返回HTTP头给浏览器的时,浏览器通过响应头中的Cache-Control来确定是否缓存资源,通常还为该缓存资源设置一个缓存时长Max-age,在该资源还没过期的情况下,再次请求,会直接返回缓存中的该资源。

如果缓存过期了,浏览器会继续发起网络请求,会在HTTP请求头中添加If-None-Match:4f80f-13c-3a1xb12a,服务器收到请求后,会根据`If-None-Match的值判断对应资源有没有发生更新,没更新直接返回304给浏览器,浏览器刷新该缓存的新鲜度。更新的话就返回最新资源。

8.2 登陆状态是如何保存的

浏览器提交登录表单数据到服务器之后,服务器进行解析、查询验证后台登录信息是否正确。输入正确的话,服务器会返回一个响应头Set-Cookie:UID=3431uad;

浏览器收到响应解析响应头,遇到Set-Cookie就会保存这个字段信息到本地,比如把UID=3431uad保存到本地

当用户再次访问的时候,浏览器会先读取之前Cookie中保存的数据,并把数据写进请求头的Cookie字段中

Cookie:UID=3431uad;

服务器收到HTTP请求头数据,就会查找请求头Cookie的字段信息,当查找到包含UID=3431uad的信息时,服务器查询后台,并判断该用户是已登录状态,然后生成含有该用户信息的页面数据,并把生成的数据发送给浏览器。

Cookie流程图:

2-5.png

HTTP请求示意图:

2-6.png

更多内容敬请了解 03 从输入URL到页面展示的完整流程 - 掘金 (juejin.cn)