浏览器中输入网址（URL）到浏览器显示的过程

缺乏、安全感 2021-09-29 12:34 405阅读 0赞

# 浏览器地址栏输入网址后再到浏览器显示发生了什么 #

## 主要经历了以下几个过程： ##

*  DNS域名解析（获得IP地址，访问服务器）
 *  建立TCP连接（三次握手）
 *  发送HTTP请求
 *  服务器得到并处理请求，返回HTTP报文
 *  浏览器进行渲染
 *  断开连接（四次握手）  
    **整个过程也叫做HTTP事物**

##### １．DNS域名解析： #####

在浏览器输入网址后，因为浏览器并不能直接通过域名找到对应的服务器，而是通过IP地址，所以这需要域名解析系统，转换得到对应的IP，才能访问服务器。

DNS（Domain Name System， 域名系统），本质就是一个数据服务器，里面存储了域名和IP的对应关系，当你在浏览器中输入一个地址时，就会通过DNS得到对应的IP。 例如 [www.baidu.com][]， 其实这段URL并不是真正意义上的地址。经过DNS转换得到对应IP（61.135.169.121） ,互联网上每一台计算机的唯一标识是它的 IP 地址， 但是 IP 地址并不方便记忆（毕竟都是很长的数字串）， 所以每个IP的URL就横空出世了，毕竟URL方便记忆。  
下面访问百度就是，其百度对应的IP返回的数据：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NzA3Mg_size_16_color_FFFFFF_t_70]

##### 2．建立TCP连接： #####

建立ＴＣＰ连接的过程，实际就是三次握手的过程。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NzA3Mg_size_16_color_FFFFFF_t_70 1]  
在这里插入图片描述  
**第一次握手：**  
客户端发送一个带 SYN=1，Seq=X 的数据包到服务器端口（由浏览器发起，告诉服务器我要发送请求了）  
**第二次握手：**  
服务器发回一个带 SYN=1， ACK=X+1， Seq=Y 的响应包以示传达确认信息（由服务器发起，告诉浏览器我准备接受了，你赶紧发送吧）  
**第三次握手：**  
客户端再回传一个带 ACK=Y+1， Seq=Z 的数据包，代表“握手结束”（由浏览器发送，告诉服务器，我马上就发了，准备接受吧）  
**注意：TCP建立连接过程中并没所有发生数据的传输。**

##### ３．发送HTTP请求： #####

TCP握手成功后，下面浏览器就可以向服务器发送http请求了， 请求数据包。

##### ４．服务器得到并处理请求，返回HTTP报文： #####

它会对TCP连接进行处理，对HTTP协议进行解析，并按照报文格式进一步封装成HTTP Request对象，供上层使用。这一部分工作一般是由Web服务器去进行，我使用过的Web服务器有Tomcat, Nginx和Apache等等，HTTP报文也分成三份，状态码 ，响应报头和响应报文。

##### ５．浏览器解析渲染： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NzA3Mg_size_16_color_FFFFFF_t_70 2]  
所以浏览器的渲染过程主要包括以下几步：

*  解析HTML生成DOM树。
 *  解析CSS生成CSSOM规则树。
 *  将DOM树与CSSOM规则树合并在一起生成渲染树。
 *  遍历渲染树开始布局，计算每个节点的位置大小信息。
 *  将渲染树每个节点绘制到屏幕。

##### ６．断开连接（四次挥手）： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NzA3Mg_size_16_color_FFFFFF_t_70 3]  
当数据传送完毕，需要断开 TCP连接，此时发起 TCP 四次挥手。  
1、第一次挥手：由浏览器发起，发送给服务器，我请求报文发送完了，你准备关闭吧；  
2、第二次挥手：由服务器发起，告诉浏览器，我接收完请求报文，我准备关闭，你也准备吧；  
3、第三次挥手：由服务器发起，告诉浏览器，我响应报文发送完毕，你准备关闭吧；  
4、第四次挥手：由浏览器发起，告诉服务器，我响应报文接收完毕，我准备关闭，你也准备吧；

[www.baidu.com]: http://www.baidu.com
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NzA3Mg_size_16_color_FFFFFF_t_70]: /images/20210812/fe6c8e1c18224e92bc290056e3a3fea1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NzA3Mg_size_16_color_FFFFFF_t_70 1]: /images/20210812/bd83e79725684795bac50b93f7f02cdc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NzA3Mg_size_16_color_FFFFFF_t_70 2]: /images/20210812/1d4b716761354ff2b342d19e472c6f6e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NzA3Mg_size_16_color_FFFFFF_t_70 3]: /images/20210812/5152482159114374a22ff19215f9c97e.png