浏览器响应url

wireshark抓包分析浏览器响应URL过程

请注意,本文编写于 136 天前,最后修改于 119 天前,其中某些信息可能已经过时。

浏览器输入URL到响应页面的全过程:

​ 输入域名

→域名解析

→建立TCP连接

→客户端发送HTTP请求

→服务器响应HTTP请求

→关闭TCP连接(四次挥手)

→浏览器渲染解析页面

域名解析

打开浏览器再打开wireshark开始抓包。在浏览器地址栏输入www.baidu.com,等到网页完全加载后停止抓包。

请求发起后,浏览器首先要做的事情就是解析这个域名(查询浏览器缓存→本地hosts文件→本地DNS服务器→上一级的DNS服务器→……→DNS根服务器)

因此首先获得获得两条DNS报文:

DNS.png
DNS.png

  • Queries是本机请求百度的IP,Answer给出3个地址。

建立TCP连接

TCP是主机对主机层的传输控制协议,提供可靠的连接服务,采用三次握手确认建立一个连接,连接服务器指定端口,建立TCP连接,并同步连接双方的序列号和确认号并交换 TCP 窗口大小信息

追踪TCP流找到三次握手

三次握手.png
三次握手.png

第一次握手

  • Destination Port 目的地端口号为80, 即试图和百度的80号端口连接,80号端口是HTTP协议的端口,浏览器若要访问需要从HTTP获取信息。
  • 建立连接时,客户端发送SYN包(syn=j)到服务器,并进入SYN_SENT状态,等待服务器确认

第二次握手

  • 服务器收到SYN包,确认客户的SYN(ACK=j+1),同时自己也发送一个SYN包(Seq=k),即SYN+ACK包,此时服务器进入SYN_RECV状态;

第三次握手

  • 客户端收到服务器的SYN+ACK包,向服务器发送确认包ACK(ACK=k+1),此包发送完毕,客户端和服务器进入ESTABLISHED(TCP连接成功)状态,完成三次握手。

客户端发送HTTP请求

发送http请求.png
发送http请求.png

  • 可以看到请求方法为get,协议是HTTP/1.1版本,下面为请求内容

服务器响应HTTP请求

状态码
1XX表示HTTP请求已经接受,继续处理请求
2XX表示HTTP请求已经处理完成
3XX表示把请求访问的URL重定向到其他目录
4XX表示客户端出现错误
5XX表示服务端出现错误

由上图可知状态码为302(临时性重定向。该状态码表示请求的资源已被分配了新的URI,希望用户(本次)能使用新的URI访问。)

具体情况:302表示临时移动到B路径下,对应到Url地址也即http://baidu.com/file/A/1.html到http://baidu.com/file/B/1.html,当浏览器访问前面一个地址的时候,这个时候服务器会告知浏览器,请到B路径下获取这个文件,随后浏览器重新发起http请求,请求B路径下的页面,服务端会将数据传输到客户端,处理完之后返回一个结果,http响应报文的状态码为200。

在谷歌浏览器的network面板中发现在302跳转之后有个200表示HTTP请求已经处理完成

network.png
network.png

然而...302之后除了客户端回了个ACK并没有其他事情发生

HTTP.png
HTTP.png

不知道是什么原因,不过我直接用id:14.215.177.39去访问了百度,得到以下结果

Http.png
Http.png

经过了正常的三次握手→正常的HTTP请求→正常的处理→正常的HTTP响应

关闭TCP连接(四次挥手)

四次挥手.png
四次挥手.png

由于TCP连接是全双工的,因此每个方向都必须单独进行关闭。这个原则是当一方完成它的数据发送任务后就能发送一个FIN来终止这个方向的连接。收到一个 FIN只意味着这一方向上没有数据流动,一个TCP连接在收到一个FIN后仍能发送数据。首先进行关闭的一方将执行主动关闭,而另一方执行被动关闭。

CP的连接的拆除需要发送四个包,因此称为四次挥手(four-way handshake)。客户端或服务器均可主动发起挥手动作,在socket编程中,任何一方执行close()操作即可产生挥手操作。

(1)客户端A发送一个FIN,用来关闭客户A到服务器B的数据传送。

(2)服务器B收到这个FIN,它发回一个ACK,确认序号为收到的序号加1。和SYN一样,一个FIN将占用一个序号。

(3)服务器B关闭与客户端A的连接,发送一个FIN给客户端A。

(4)客户端A发回ACK报文确认,并将确认序号设置为收到序号加1。

四次挥手结束后客户端和服务端之间的TCP连接关闭

浏览器渲染解析页面

其实在服务端发送数据浏览器就开始渲染了

渲染步骤大致可以分为以下几步:

  1. 解析HTML,构建 DOM 树
  2. 解析 CSS ,生成 CSS 规则树
  3. 合并 DOM 树和 CSS 规则,生成 render 树
  4. 布局 render 树( Layout / reflow ),负责各元素尺寸、位置的计算
  5. 绘制 render 树( paint ),绘制页面像素信息
  6. 浏览器会将各层的信息发送给 GPU,GPU 会将各层合成( composite ),显示在屏幕上

添加新评论