本文共 2033 字，大约阅读时间需要 6 分钟。

当在浏览器地址栏输入框内输入url 时发生了什么？

1. 浏览器对网址进行URI 解析
2. 浏览器通过DNS域名服务器解析到服务IP（ping www.baidu.com）
3. 客户端(浏览器)通过TCP协议建立到服务器的TCP连接 (三次握手)
4. 发送HTTP请求：客户端（浏览器）向web服务器端（HTTP服务器）发送HTTP协议包，请求服务器里的资源文档 （telnet 模拟）
5. 服务器处理并响应报文 / 服务器向客户端发送HTTP协议应答包
6. 客户端和服务器断开（四次挥手）
7. 浏览器解析并渲染页面

URI解析

• 地址解析和编码
• HSTS
• 缓存检查
  

域名解析过程

找不到相应的域名对应的IP时，继续下一个步骤。

1. 浏览器会先从本地缓存中看，有没有这个域名对应；
2. 查看计算机本地的HOST（HOST文件记录域名与IP的映射关系）指向，有没有相关记录。
3. 向本地的DNS解析服务器发起解析请求，若未找到对应的IP，则将顶级域名服务器地址返回给本地DNS服务器。
4. 本地DNS解析服务器向顶级域名服务器发送请求。顶级域名服务器接收到解析请求之后，查找域名对应的域名服务器的地址（每个顶级域名都有一个记录着所有注册过相应域名的记录。）并 返回给本地域名服务器。
5. 本地DNS解析服务器获取到了域名对应的IP之后就会把这个信息返回给发出请求的计算机，然后本地域名服务器会在本地进行缓存，相应的浏览器也会对这个域名和IP进行缓存，以保证下次再有访问这个域名时可以很快的响应。

TCP三次握手

第一次握手：刚开始客户端处于 CLOSED 的状态，服务端处于 LISTEN 状态。客户端给服务端发送一个 SYN 报文（请求建立连接），并指明客户端的初始化序列号 seq，此时客户端处于 SYN_SENT 状态。

第二次握手：当服务器收到客户端的 SYN 报文之后，会以自己的 SYN 报文作为应答（同意建立连接），并且也指定了自己的初始化序列号 seq。同时会把客户端的 seq+ 1 作为ack的值，表示自己已经收到了客户端的 SYN（确认收到信息），此时服务器处于 SYN_RCVD 的状态。

第三次握手：当客户端收到 SYN 报文之后，会发送一个 ACK 报文，当然，也同样把服务器的 seq+ 1 作为 ACK 的值，表示已经收到了服务端的 SYN 报文（确认收到信息），此时客户端处于 ESTABLISHED 状态。服务器收到 ACK 报文之后，也处于 ESTABLISHED 状态，此时，双方成功建立起了连接。

为什么建立连接的时候需要进行三次握手呢？

第一次握手成功让服务端知道了客户端具有发送能力

TCP四次挥手

第一次挥手：在挥手之前服务端与客户端都处于 ESTABLISHED 状态。客户端发送一个 FIN 报文，用来关闭客户端到服务器的数据传输，并指明客户端的初始化序列号 seq，此时客户端处于 FIN_WAIT_1 状态。

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

第三次挥手：如果服务端同意关闭连接，则会向客户端发送一个 FIN 报文，并且指定一个序列号，此时服务端处于 LAST_ACK 的状态。

第四次挥手：当客户端收到 ACK 之后，处于 FIN_WAIT_2 状态。待收到 FIN 报文时发送一个 ACK 报文作为应答，并且把服务端的序列号值 +1 作为自己 ACK 报文的序列号值，此时客户端处于 TIME_WAIT 状态。等待一段时间后会进入 CLOSED 状态，当服务端收到 ACK 报文之后，也会变为 CLOSED 状态，此时连接正式关闭。

为什么建立连接只通信了三次，而断开连接却用了四次？

因为当服务端收到客户端的 FIN 报文后(客户端发送完成)，发送的 ACK 报文只是用来应答的，并不表示服务端也希望立即关闭连接（服务端表示知道了，确认收到信息）。

当只有服务端把所有的报文都发送完了，才会发送 FIN 报文（服务端接收完成），告诉客户端可以断开连接了，因此在断开连接时需要四次挥手（确认收到信息）。

浏览器解析并渲染页面

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

• 根据 HTML 解析出 DOM 树 （深度优先遍历）遇到script 标签 暂停

• 根据 CSS 解析生成 CSS 规则树

• 结合 DOM 树和 CSS 规则树，生成渲染树

• 布局：根据渲染树计算每一个节点的信息（位置和尺寸）

• 根据计算好的信息绘制页面

回流：元素尺寸或位置发生变化；内容发生变化；浏览器窗口尺寸变化

重绘：元素样式改变：背景颜色，文字颜色发生变化

转载地址：https://blog.csdn.net/Conradine_Lian/article/details/107280089 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！