从输入URL到页面加载完成的过程

243 阅读2分钟

从输入URL到页面加载一般要经历一下以下几个过程:

  • 1.通过DNS解析获得对应的ip地址
    什么是DNS?
    dns 起到域名解析作用的,是将域名和IP进行绑定的,通过域名找到互联网上实际的物理地址的服务器,找到这个服务器后,服务器会把请求解析。
  • 2.根据IP地址访问服务器
  • 3.请求之前建立TCP连接
    在建立连接的过程中会有一个三次握手,如图:

    第一次握手:客户端发送syn包到服务器,等待服务器确认;
    第二次握手:服务器收到syn包,同时自己也发送一个包(syn+ack),
    第三次握手:客户端收到syn+ack包,向服务器发送确认包ack,此时包发送完毕,客户端和服务器完成三次握手。
  • 4.发送请求
  • 5.服务器得到请求,给出对应的资源,
  • 6.客户端得到响应的资源后,进行解析与渲染
  • 7.断开连接(四次挥手)

那么客户端是如何进行解析代码渲染页面的呢?

服务器收到信息后会将相应的HTML,CSS,JS文件等外部资源发送给客户端。总结为以下几点:

  • 1.浏览器解析将HTML代码称为DOM树结构
  • 2.将CSS代码解析成CSSOM结构(CSS Object Model)
  • 3.结合DOM和CSSOM构建渲染树
  • 4.生成布局,即将所有渲染树的页面进行合成
  • 5.将布局绘制到屏幕

    接下来讲一下四次挥手,即断开连接

如图:


(1)第一次挥手:Client发送一个FIN,用来关闭Client到Server的数据传送,Client进入FIN_WAIT_1状态。

(2)第二次挥手:Server收到FIN后,发送一个ACK给Client,确认序号为收到序号+1(与SYN相同,一个FIN占用一个序号),Server进入CLOSE_WAIT状态。

(3)第三次挥手:Server发送一个FIN,用来关闭Server到Client的数据传送,Server进入LAST_ACK状态。

(4)第四次挥手:Client收到FIN后,Client进入TIME_WAIT状态,接着发送一个ACK给Server,确认序号为收到序号+1,Server进入CLOSED状态,完成四次挥手。

那么为什么要进行四次挥手呢?

确保数据能够完整传输。

当被动方收到主动方的FIN报文通知时,它仅仅表示主动方没有数据再发送给被动方了。

但未必被动方所有的数据都完整的发送给了主动方,所以被动方不会马上关闭SOCKET,它可能还需要发送一些数据给主动方后,

再发送FIN报文给主动方,告诉主动方同意关闭连接,所以这里的ACK报文和FIN报文多数情况下都是分开发送的。