计算机网络从页面中输入URL到加载完成都发生了什么

不念不忘少年蓝@ 2024-04-17 06:30 87阅读 0赞

### 文章目录 ###

*  整体步骤
 *  具体步骤
 *   *  1.输入URL后按下回车
     *  2.DNS域名解析
     *  3.发起TCP连接
     *  4.发送Http请求
     *  5.接受Http响应
     *  6.断开TCP连接
     *  7.浏览器进行页面渲染
 *  拓展问题

# 整体步骤 #

1.  输入URL后按下回车
2.  DNS域名解析
3.  发起TCP连接（三次握手）
4.  发送Http请求
5.  接受Http响应
6.  断开TCP连接（四次挥手）
7.  浏览器进行页面渲染

# 具体步骤 #

## 1.输入URL后按下回车 ##

打开计算机的浏览器，浏览器定位了它的地址栏，并需要输入一个网址，敲击回车后，开始下面的步骤

## 2.DNS域名解析 ##

回车敲响的那一刻，浏览器会检查地址栏。因为浏览器需要的是IP地址，所以便会进行DNS域名解析，步骤如下：

1.  查找**浏览器缓存**，寻找是否有这个网址的记录
2.  查找**系统缓存**，主要是去查找系统中的hosts文件
3.  查找**路由器缓存**，查看路由器映射表
4.  如果上面这三步都没有查找到相应的ip地址，计算机就会将域名发送给**本地DNS服务器**（提供本地连接的服务商）
5.  本地DNS服务器找不到相应的IP地址就会将域名发送给**其他服务器**
6.  进行递归查找过程，如下所示：
    
    1.  首先会发送到**根域名服务器**去找，并返回顶级域名服务器的IP地址
    2.  再请求**顶级域名服务器IP**，返回二级域名服务器IP
    3.  再请求**二级域名服务器IP**，返回三级域名服务器IP
    4.  …
7.  查找到相应的IP地址后，返回给浏览器  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70]

## 3.发起TCP连接 ##

浏览器拿到IP地址后，作用于运输层上的TCP协议向远端服务器发起连接请求，此举成为三次握手：

1.  客户端 ——> 服务端：你好，我想跟你连接可以吗？（SYN=1,seq=x）
2.  服务端 ——> 客户端：可以，你确定要连接是吧？（SYN=1,ACK=1,seq=y,ack=x+1）
3.  客户端 ——> 服务端：确定，我们连接吧！（ACK=1,seq=x+1,ack=y+1）

## 4.发送Http请求 ##

TCP连接完成后，就开始进行数据的传输。此时需要将用户输入的地址封装成Http Request请求报文，发送到服务器。

HTTP请求报文格式如下：

*  请求行
    
     *  请求方式（GET/POST/DELETE/PUT）
     *  请求资源路径（URL）
     *  HTTP版本号
 *  请求头
 *  空行
 *  消息体  
    ![在这里插入图片描述][20190829174328997.png]

## 5.接受Http响应 ##

服务器收到请求后会作出应答，即响应数据

HTTP响应报文格式如下：

*  状态行
    
     *  状态码
     *  状态说明
     *  HTTP版本号
 *  响应头
 *  空行
 *  消息体  
    ![在这里插入图片描述][20190829174552870.png]

## 6.断开TCP连接 ##

传输数据完成后，断开TCP连接，即四次挥手：

1.  客户端 ——> 服务端：好了，咱们断开吧（FIN=1,seq=u）
2.  服务端 ——> 客户端：行，等我稍微检查一下还有没有要发你的数据（ACK=1,seq=v,ack=u+1）
3.  服务端 ——> 客户端：可以了，咱们断开吧，拜拜（FIN=1,ACK=1,seq=w,ack=u+1）
4.  客户端 ——> 服务端：好的，再会，拜拜（ACK=1,seq=u+1,ack=w+1）

## 7.浏览器进行页面渲染 ##

**简单描述**  
浏览器解析HTML代码，请求js，css等资源，最后进行页面渲染，呈现给用户。

**详细描述**  
浏览器获取文件后开始利用内核解析了，解析过程中也会出现一些HTTP请求请求一些资源，如js，css等文件，将这些文件下载到本地。浏览器解析HTML文件时会自上而下，起初产生一个DOM树，解析CSS之后产生CSS规则树，后将两树进行融合，合成为渲染层，最后调用操作系统的Native GUI的API绘制。

# 拓展问题 #

建议参考此篇文章：https://mp.weixin.qq.com/s?\_\_biz=Mzg2NzA4MTkxNQ==&mid=2247485625&idx=1&sn=ea3010c3c9fb167b30637c271f7a4a6a&chksm=ce40436df937ca7b2f5870a50fd339972bdfced68a328321f83fa5947bfa0ec9fe34c438ad27&mpshare=1&scene=23&srcid=0825miKY6hGLdoe1zbuSgQF9&sharer\_sharetime=1566722165919&sharer\_shareid=f4f34aef571ac48a04de36a159910d65\#rd

--------------------

1.  现代浏览器在与服务器建立了一个 TCP 连接后是否会在一个 HTTP 请求完成后断开？什么情况下会断开？  
    默认情况下建立 TCP 连接不会断开，只有在请求报头中声明 Connection: close 才会在请求完成后关闭连接。
2.  一个 TCP 连接可以对应几个 HTTP 请求？  
    如果维持连接，一个 TCP 连接是可以发送多个 HTTP 请求的。
3.  一个 TCP 连接中 HTTP 请求发送可以一起发送么（比如一起发三个请求，再三个响应一起接收）？  
    在 HTTP/1.1 存在 Pipelining 技术可以完成这个多个请求同时发送，但是由于浏览器默认关闭，所以可以认为这是不可行的。在 HTTP2 中由于 Multiplexing 特点的存在，多个 HTTP 请求可以在同一个 TCP 连接中并行进行。
4.  为什么有的时候刷新页面不需要重新建立 SSL 连接？  
    TCP 连接有的时候会被浏览器和服务端维持一段时间。TCP 不需要重新建立，SSL 自然也会用之前的。
5.  浏览器对同一 Host 建立 TCP 连接到数量有没有限制？  
    如果图片都是 HTTPS 连接并且在同一个域名下，那么浏览器在 SSL 握手之后会和服务器商量能不能用 HTTP2，如果能的话就使用 Multiplexing 功能在这个连接上进行多路传输。不过也未必会所有挂在这个域名的资源都会使用一个 TCP 连接去获取，但是可以确定的是 Multiplexing 很可能会被用到。  
    如果发现用不了 HTTP2 呢？或者用不了 HTTPS（现实中的 HTTP2 都是在 HTTPS 上实现的，所以也就是只能使用 HTTP/1.1）。那浏览器就会在一个 HOST 上建立多个 TCP 连接，连接数量的最大限制取决于浏览器设置，这些连接会在空闲的时候被浏览器用来发送新的请求，如果所有的连接都正在发送请求呢？那其他的请求就只能等等了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/5839d494259e438eaed34ececaeb6629.png
[20190829174328997.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/1c1a8265ab2d488088acbaa345968fbd.png
[20190829174552870.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/bab771c1afb94f88a9bae2cac62a8380.png