greg-rakozy-vw3Ahg4x1tY-unsplash.jpg

1.DNS解析a997034f-91c7-4d68-aae7-3820719a242f.jpg

互联网的每一台主机都是以IP地址来标识位置的,但IP地址往往是由数字或者数字+字母的形式组合而成,不利于人类记忆,所以才有了常见的“网址”,比如:https://www.yuque.com 这种方便人类记忆的形式。但对于计算机来说其只能使用IP地址来识别并定位。因此输入url后所做的第一步即为DNS解析,将我们输入的url通过网络服务商(路由器)提供的DNS解析器转换为IP地址。

2.建立TCP连接(3次握手)

在发送正式的请求数据之前我们需要通过TCP建立起客户端和服务端的链接。在这个过程中,客户端首先发送SYN数据包表示请求链接;服务端若同意建立起链接,则会向客户端发送响应SYN和ACK的数据包;最后一次“握手”客户端会再次发送ACK数据包表示连接成功

从输入URL到展示页面经历了哪些阶段? - 图4

3.发送HTTP请求

客户端按照请求格式向服务端正式发送请求:

从输入URL到展示页面经历了哪些阶段? - 图5

4.响应请求

服务端收到客户端的请求报文之后会进行相应的处理并返回响应报文,格式如下:
从输入URL到展示页面经历了哪些阶段? - 图6

5.页面渲染

简略地说就是对HTML,CSS,JavaScript等进行处理,对DOM,CSSOM进行绘制。
1.HTML
从输入URL到展示页面经历了哪些阶段? - 图7

2.CSS
从输入URL到展示页面经历了哪些阶段? - 图8

上述两者结合之后会形成渲染树(DOM+CSSOM)。构建DOM时若HTM中含有link,script标签则会去请求相应的资源,但js文件会在CSSOM构建完成之后再执行(但可以下载并解析js文件),原因在于CSSOM不支持部分解析,而DOM支持部分解析。DOM构建完成之后并不能马上渲染页面,而是需要等待CSSOM解析完成之后再进行渲染树的构建,之后才是正常的根据盒子模型进行布局并绘制。

参考资料

  1. 在浏览器输入URL回车之后发生了什么?
  2. 浏览器渲染页面的流程