一.浏览器的地址栏输入url并回车

二.在我们自己的电脑上先把通过DNS服务器的域名解析成IP地址

三.我们的电脑要和服务器建立一个TCP的网络连接(通过三次握手)

1.第一次握手:客户端发给服务器一个SYN报文

2.第二次握手:服务器收到SYN报文之后,会应答一个SYN+ACK报文

3.第三次握手:客户端收到STN+ACK报文后,会回应一个ACK报文

服务器收到ACK报文后,三次握手建立完成,作用是为了确认双方的接收和发送能力是否正常.

如图所示:

从输入url到页面加载完成中间发生了什么_服务端

四.我们的浏览器往IP地址为解析后的服务器上发送http请求

五.服务器接收到http请求后,处理http请求

六.服务器处理后,会开始回复我们的浏览器

七.我们的电脑和服务器之间断开TCP链接(四次挥手)

1.客户端发送断开TCP链接请求的报文,其中报文包含seq序列号,是由发送端随机生成的,并且还将报文重中的FIN字段设置为1,表示需要断开TCP链接.(FIN=1,seq=x,x是由客户端随机生成的)(客户端发送断开TCP请求的包).

2.服务端会回复客户端发送的TCP断开请求报文,其包含seq序列号,是由回复端随机生成的,而且会产生ACK字段,ACK字段数值是在客户端发过来的seq序列号基础上加1进行回复,以便客户端收到消息时,知晓之间的TCP断开请求已经得到验证.(FCN=1,ACK=X+1,seq=有,y由服务端随机生成)(服务端收到断开请求的包后,表示同意断开)

3.服务端在回复客户端的TCP断开请求后,不会马上进行TCP连接的断开,服务端会确保断开前,所有传输到A的数据是否已经传输完毕,一旦确认数据传输完毕,就会将回复报文的FIN字段设置为1,并产生随机seq序列号.(FIN=1,ACK=x+1,seq=z,z由服务端随机生成).(服务器发送断开TCP的请求,准备断开)

4.客户端收到服务端的TCP断开请求后,会回复服务端的断开请求,包含随机生成的seq字段和ACK字段,ACK字段会在服务端的TCP断开请求基础上+1,从而完成服务端请求的验证回复.(FCN=1,ACK=z+1,seq=h,h为客户端随机生成)(浏览器收到断开的请求断开了)

如图所示:

从输入url到页面加载完成中间发生了什么_url_02

七.浏览器收到http回复后,开始解析html+css在浏览器上绘制形成我们所看到的网页

1.浏览器会将HTML解析成一个DOM树,DOM树的构建过程是一个深度遍历的过程:当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点.

2.将css解析成CSS Rule Tree.

3.根据DOM树和CSSOM来构造Rendering Tree.注意:Rendering Tree渲染树并不同于DOM树,因为一些像Header或display:none的东西就没必要放在渲染树中了.

4.有了Render Tree,浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为layout,顾名思义就是计算出每个节点在屏幕中的位置。

5.再下一步就是绘制,即遍历render树,并使用UI后端层绘制每个节点.

如图所示:

从输入url到页面加载完成中间发生了什么_服务端_03

以上,就是大致的从我们发送url到页面加载完成的过程.