从输入url到页面展示的过程发生了什么| 青训营

读完本篇，你对该问题便能有个大致的了解。

在日常生活中，我们通过在浏览器的地址栏里输入url然后按下回车就可以得到我们想查看的内容，如下图所示（这里展示的是进入Bilibili的页面）

这里我们只需要输入对应网站的url就可以访问到对应的网站，那么在这个过程中，到底发生了什么呢？里面发生的事情可以概括为三个步骤：

1. http请求阶段
2. http响应阶段
3. 浏览器渲染阶段

🌸 http请求阶段

在http请求阶段，又分为如下的步骤：

• DNS解析

当我们拿到一个完整的URL，我们分析一下该URL所包含的内容，这里有一个URL为：https://juejin.cn:443/flash-note?note_id=XXX&from=6

传输协议:（https://）

域名:（www.juejin.cn）

端口（:443）

请求资源路径名称（/flash-note）

问号传参信息（?note_id=XXX&from=6）

我们要访问某个网站，就需要知道该网站的地址，这里的地址一般是指IP地址。IP地址由数字组成，是计算机在互联网上唯一的逻辑地址，但由于是纯数字组成，不方便人们记忆。

基于IP地址发展出了域名地址，该域名地址可以代替IP地址，便于人们记忆。但计算机只能识别IP地址，因此需要将域名地址解析为IP地址。解析的过程如下所示：

①首先本地电脑会检查浏览器缓存中有没有这个域名所对应的解析过的IP地址，如果没有则继续②；

②浏览器会查找操作系统缓存中是否有这个域名对应的DNS解析结果，如果没有继续③。

③查找本地DNS服务站中的解析结果，如果没有继续④；

④向根DNS服务器发送请求，根DNS服务器会返回顶级DNS地址；

⑤本地服务器去访问顶级DNS服务器，会返回下一级的DNS服务器地址；

⑥接着访问下一级的DNS服务器地址，最终返回正确的DNS解析结果。这里可能还存在一些向下一级DNS服务器访问的步骤。

【注意】主机和本地域名服务器之间的查询方式是递归查询，域名服务器之间是迭代查询

以上便是DNS域名解析过程。

• 建立TCP连接

这里主要涉及TCP的三次握手操作

只有经过三次握手才能确认双发的收发功能都正常，缺一不可：

第一次握手（客户端发送 SYN 报文给服务器，服务器接收该报文）：客户端什么都不能确认；服务器确认了对方发送正常，自己接收正常

第二次握手（服务器响应 SYN 报文给客户端，客户端接收该报文）： 客户端确认了：自己发送、接收正常，对方发送、接收正常； 服务器确认了：对方发送正常，自己接收正常

第三次握手（客户端发送 ACK 报文给服务器）： 客户端确认了：自己发送、接收正常，对方发送、接收正常； 服务器确认了：自己发送、接收正常，对方发送、接收正常

• 发送http请求

请求报文的格式如下：

请求报文 ：重点是格式与参数

①行：（请求类型-get/post url路径 http版本）

POST /s?ie=utf-8 HTTP/1.1

②头： Host: atguigu.com Cookie: name=guigu Content-type: application/x-www-form-urlencoded User-Agent: chrome 83

③空行

④体：// 可以有可没有，get请求体为空，post请求，体可以不为空 username=admin&password=admin

🌸 http响应阶段

接收到服务器发回来的响应报文，格式如下：

响应报文

①行：版本，响应状态码，响应描述（响应状态字符串）

HTTP/1.1 200 0K

②头： Content-Type: text/html; charset=utf-8 Content-length: 2048 Content-encoding: gzip

③空行：

④体：HTML代码

🌸 浏览器渲染阶段

• 浏览器拿到代码后，会在内存条中开辟一个栈内存，用来给代码的执行提供环境；同时分配一个主线程去一行行的解析和执行代码。
• 遇见HTML标记，浏览器调用HTML解析器解析成token并构建DOM树，一遍解析完只生成了DOM树；
• 遇见style/link标记，浏览器调用css解析器处理css标记并构建CSSOM树；遇见script标记，浏览器调用js解析器处理js代码（绑定事件，修改DOM树和CSSOM树），遇到img、音视频等都会开辟全新的线程去加载资源文件
• 根据每个可见节点以及其对应的样式，将DOM树和CSSOM树合并成一个渲染树（render）
• 回流：根据渲染树来计算布局，计算每个结点的几何信息
• 重绘：将各个结点的颜色绘制到屏幕上（渲染）

【注意】上面的步骤不一定按照顺序进行，如果DOM树或者CSSOM树被修改了，可能会执行多次回流和重绘，往往实际页面中，这些会执行多次的

最后，是断开TCP连接，这里涉及TCP的四次挥手操作：

第一次挥手：客户端发送一个 FIN 报文（请求连接终止：FIN = 1），报文中会指定一个序列号 seq = u。并停止再发送数据，主动关闭 TCP 连接。此时客户端处于 FIN_WAIT1 状态，等待服务端的确认。

第二次挥手：服务端收到 FIN 之后，会发送 ACK 报文，且把客户端的序号值 1 作为 ACK 报文的序列号值，表明已经收到客户端的报文了，此时服务端处于 CLOSE_WAIT 状态。

第三次挥手：如果服务端也想断开连接了（没有要向客户端发出的数据），和客户端的第一次挥手一样，发送 FIN 报文，且指定一个序列号。此时服务端处于 LAST_ACK 的状态，等待客户端的确认。

第四次挥手：客户端收到 FIN 之后，一样发送一个 ACK 报文作为应答（ack = w 1），且把服务端的序列值 1 作为自己 ACK 报文的序号值（seq=u 1），此时客户端处于 TIME_WAIT （时间等待）状态。

🚨 注意 ！！！这个时候由服务端到客户端的 TCP 连接并未释放掉，需要经过时间等待计时器设置的时间 2MSL（一个报文的来回时间） 后才会进入 CLOSED 状态（这样做的目的是确保服务端收到自己的 ACK 报文。如果服务端在规定时间内没有收到客户端发来的 ACK 报文的话，服务端会重新发送 FIN 报文给客户端，客户端再次收到 FIN 报文之后，就知道之前的 ACK 报文丢失了，然后再次发送 ACK 报文给服务端）。服务端收到 ACK 报文之后，就关闭连接了，处于 CLOSED 状态。

结束。

这篇好文章是转载于：学新通技术网