浏览器输入url到渲染页面之间发生了啥

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浏览器输入url到渲染页面之间发生了啥相关的知识,希望对你有一定的参考价值。

参考技术A 简单的概括可以列为以下几个步骤
1.DNS解析
2.TCP连接
3.发送http请求
4.服务端响应请求
5.浏览器解析响应结果,渲染页面

1.DNS解析

DNS,全称是(Domain Name System,域名系统),因为服务器的ip是一串数字,不好记,于是便用域名代替ip,比较有语义。
所谓DNS解析,其实就是将输入的url从域名解析为对应的ip
1.1首先先找浏览器有没有dns缓存(之前有访问记录),如果有则返回ip
1.2如果没有,则寻找本地的host文件,看看有没有域名记录,如果有则返回ip
1.3如果本地host文件没有则直接向本地DNS服务器请求,如果还是没有,继续向上DNS服务器请求,直至返回

2.建立TCP连接。
浏览器在解析完域名之后,要发送http请求,就必须和服务器建立TCP连接。所谓的TCP连接其实就是大家口中的三次握手。

步骤如下:
1.客户端发送 SYN 数据包给服务端
2.服务端收到客户端的数据包,返回 SYN/ACK 数据包给客户端
3.客户端收到服务端的返回后,发送 ACK 数据包给服务端

问:一定要三次握手嘛,两次行不行。
答:不行,两次握手是不可靠的。客户端在发SYN数据包给服务器之后,服务器会返回SYN/ACK数据包给客户端以表示收到。届时则可以开始数据传输了。但是如果客户端在第二次握手之后就关闭了。那服务端就会一直处于等待状态。
比如A和B约定好了今天去某某某地方玩,A先给B发了个微信,说我们今天去xxx公园玩吧。B收到这条微信后回复A,好的。但是如果A出了点意外,去不了了。但是B不知道,B还是如实赴约了。场面就一度陷入尴尬了。
所以还需要有第三次握手,A告诉B,我今天去不了了。你也别去了。同理,客户端在收到服务端回复之后,又会发送一次ACK数据包给服务端,表示我还在线,我收到了你的回复。我们可以进行下一步了。

那么建立了TCP连接之后,怎么断开呢?
答:四次挥手
步骤如下:
1.客户端向服务端发出一个FIN,用来关闭连接,此时客户端还能接收数据
2.服务端在收到这个信号之后会向客户端发出一个ACK,然后服务端就进入了close_wait(关闭等待)状态,客户端收到后,进入fin_wait_2状态,等待服务端主动关闭连接,此时还能接受数据
3.服务端此后没有数据发给客户端时,服务端会向客户端发送一个FIN,关闭服务端到客户端的连接
4.客户端在收到之后会回复一个ACK,服务端收到后,关闭连接,立刻进入 closed 状态,客户端在等待两个最大段生命周期(MSL)之后,也关闭连接,进入closed状态.

那为什么是四次挥手呢,挥一次两次不行嘛?
答:这其实和三次握手同理,就是一个对话的形式。

建立了TCP连接之后,客户端和服务端就进入了一个类似于对话的模式,突然在某个时间段,
客户端表示我不想再跟你聊天了。我要终止我们的交谈。
但是客户端是个有礼貌的小朋友,他并没有直接关闭会话,而是向服务端挥手了一次说:好兄弟,我不想再聊下去了。
客户端挥手完也没有立即离开。而是等待服务端的回复。
所以此时客户端还处于可以接收数据的状态。

服务端在看到了客户端的挥手之后,表示:好了好了,我知道了。于是服务端向客户端发起了第二次挥手。
但此时服务端也并没有直接终止连接。而是进入了一个等待终止的状态。因为服务端此时可能还有些想说的话没对客户端说。所以并没有立即终止

客户端在收到第二次挥手的ACK之后,表示:好的,那你再好好想想,还有啥没说的话想对我说的,我等你。

待服务端思考片刻之后,感觉自己没啥话想说了。于是便向客户端发起了第三次挥手。此时就会关闭服务端到客户端的连接。

客户端在收到之后,会回复一个ACK,服务端收到后。知道该说的都说了。招呼也打好了。可以结束了。于是他关闭连接立即进入closed状态。而客户端在等待两个最大段生命周期之后,也会关闭连接。进入closed状态。

综上,就是客户端与服务端的三次握手和四次挥手

建立好TCP连接之后,就可以开始发送http请求了。
而后就是客户端在收到请求的响应体之后去渲染页面。具体就不做过多赘述了。

带你深挖从 URL 输入到页面展示发生了什么

文章目录

一、总体过程

(1)DNS 解析:将域名解析成 IP 地址

(2)TCP 连接:TCP 三次握手

(3)发送 HTTP 请求

(4)服务器处理请求并返回 HTTP 报文

(5)浏览器解析渲染页面

(6)断开连接:TCP 四次挥手

我们输入的 URL,统一资源定位符,也就是我们常说的网址,用于定位互联网上的资源

在浏览器输入网址后,首先要经过域名解析,因为浏览器并不能直接通过域名找到对应的服务器,而是要通过 IP 地址。

所以会先向 DNS 服务器发送域名,DNS 服务器查询到与域名相对应的 IP 地址,然后返回给浏览器,浏览器再将 IP 地址打在协议上,同时请求参数也会在协议上加载,一并发送给对应的服务器。

在客户端发送数据之前会首先发起 TCP 三次握手,来同步客户端和服务端的序列号和确认号,同时交换 TCP 窗口大小信息

TCP 三次握手结束后,开始发送 HTTP 请求报文,请求报文由请求行,请求头,空行和消息主体构成

服务器通过监听端口,请求来之后,根据 URL 信息,确定将请求交给哪个 Servlet 去处理,然后调用这个 Servlet 的 service 方法,service 方法返回一个 response 对象,服务器再把这个 response 返回给客户端。

这个响应报文由,响应行,响应首部,空行和消息主体构成

最后浏览器通过渲染引擎将网页展现给用户

当数据传送完毕,需要断开 TCP 连接,此时发起 TCP 四次挥手

二、域名解析

在浏览器输入网址后,首先要经过域名解析,因为浏览器并不能直接通过域名找到对应的服务器,而是要通过 IP 地址。

所以会先向 DNS 服务器发送域名,DNS 服务器查询到与域名相对应的 IP 地址,然后返回给浏览器,浏览器再将 IP 地址打在协议上,同时请求参数也会在协议上加载,一并发送给对应的服务器。

(1)IP 地址

IP 地址是指互联网协议地址,是 IP 协议提供的一种统一的地址格式,它为互联网上的每一个网络和每一台主机分配一个逻辑地址,以此来屏蔽物理地址的差异。IP 地址是一个 32 位的二进制数,比如 127.0.0.1 为本机 IP。

(2)域名

域名就相当于 IP 地址乔装打扮的伪装者,带着一副面具。它的作用就是便于记忆和沟通的一组服务器的地址。用户通常使用主机名或域名来访问对方的计算机,而不是直接通过 IP 地址访问。因为与 IP 地址的一组纯数字相比,用字母配合数字的表示形式来指定计算机名更符合人类的记忆习惯。但要让计算机去理解名称,相对而言就变得困难了。因为计算机更擅长处理一长串数字。为了解决上述的问题,DNS 服务应运而生。

(3)域名解析

DNS 协议提供通过域名查找 IP 地址


(4)浏览器如何通过域名查询 URL 对应的 IP

浏览器缓存:浏览器会按照一定的频率缓存 DNS 记录。
操作系统缓存:如果浏览器缓存中找不到需要的 DNS 记录,那就去操作系统中找。
路由缓存:路由器也有 DNS 缓存。
ISP 的 DNS 服务器:ISP 是互联网服务提供商(Internet Service Provider)的简称,ISP 有专门的 DNS 服务器应对 DNS 查询请求。
根服务器:ISP 的 DNS 服务器还找不到的话,它就会向根服务器发出请求,进行递归查询(DNS 服务器先问根域名服务器.com 域名服务器的 IP 地址,然后再问.baidu 域名服务器,依次类推)

三、TCP 三次握手

在客户端发送数据之前会首先发起 TCP 三次握手,来同步客户端和服务端的序列号和确认号,同时交换 TCP 窗口大小信息

TCP 三次握手的具体学习可参考:一篇文章带你完整复习三次握手和四次挥手

四、发送 HTTP 请求

TCP 三次握手结束后,开始发送 HTTP 请求报文,请求报文由请求行,请求头,空行和消息主体构成

HTTP 消息结构详细内容学习可参考:一篇文章带你完整整理 HTTP 相关知识内容

五、服务器处理请求并返回 HTTP 报文

服务器通过监听端口,请求来之后,根据 URL 信息,确定将请求交给哪个 Servlet 去处理,然后调用这个 Servlet 的 service 方法,service 方法返回一个 response 对象,服务器再把这个 response 返回给客户端。

具体的过程可以学习:Servlet 的执行原理

六、浏览器解析渲染页面

浏览器拿到响应文本 HTML 后,接下来介绍下浏览器渲染机制


浏览器解析渲染页面分为一下五个步骤:

  • 根据 HTML 解析出 DOM 树
  • 根据 CSS 解析生成 CSS 规则树
  • 结合 DOM 树和 CSS 规则树,生成渲染树
  • 根据渲染树计算每一个节点的信息
  • 根据计算好的信息绘制页面

七、断开连接

TCP 四次挥手的过程

TCP 四次挥手的具体学习可参考:一篇文章带你完整复习三次握手和四次挥手

八、浏览器同时打开很多标签页,共用一个TCP连接吗?

对于HTTP1.1 来说
不一定,如果发的域名不一样,肯定不能复用,
域名相同,如果第一个请求和第二个请求并行发送,也不能复用
域名相同,请求顺序发送,还有看是否有connection:keep-alive请求头,没有则不复用

如果都满足,才会复用同一个tcp连接

对于HTTP2 来说:所有的请求都在一个tcp连接上,采用多路复用,基于二进制协议,可以给数据拆成包,并打上包的顺序供tcp能正确认知接收的包的顺序

九、浏览器和服务器交互,谁先主动关闭?

大多数情况下都是服务器响应之后,先进入关闭状态,所以服务器会有大量的 time_wait 状态

所以 time_wait 的时间不能太长,否则当积累太多的 time_wait 状态的 tcp 连接后,服务器容易挂掉

如果http请求发出后,直接关闭浏览器,这时浏览器会先进入关闭状态,服务器会继续处理,

当进行交互时发现与客户端断开了连接时,才会被终端

十、浏览器打开就关闭,服务器怎么办?

如果http请求发出后,直接关闭浏览器,这时浏览器会先进入关闭状态,服务器会继续处理,

当进行交互时发现与客户端断开了连接时,才会被终端

以上是关于浏览器输入url到渲染页面之间发生了啥的主要内容,如果未能解决你的问题,请参考以下文章

从输入URL到浏览器显示页面发生了啥?

浏览器从输入URL后到出现页面,这个过程发生了啥?

当用户输入一个url地址后,到看到页面的过程,期间发生了啥?

从输入 URL 到页面加载完成的过程中都发生了啥事情

输入url到页面展示的过程

从输入URL到页面展示,这中间发生了什么?