URL到页面: 探索网页加载的神秘过程

青旅半醒 2023-10-12 11:51 34阅读 0赞

当我们从浏览器的地址栏输入 URL, 按下回车,

![img][]

再到最后出现需要的网页界面,

![img][img 1]

这中间究竟发生了什么, 接下来就一步步进行解析.

主要是如下过程:

1.  输入网址
2.  DNS 解析
3.  客户端发送 HTTP 请求
4.  建立 TCP 连接
5.  服务器处理请求, 计算响应, 返回响应
6.  浏览器渲染页面
7.  关闭连接

本篇中只是概述整个过程, 主要是说明从输入 URL 到展示出页面这个过程中做了什么, 但不会对这中间的每个子过程进行详细的介绍, 这些内容在我前面的博客都有总结过, 不清楚的话可以参考看一看, 具体如下.

[计网之初识网络(理解网络传输的基本流程)][Link 1]

[计网传输层协议:UDP和TCP][UDP_TCP]

[计网之IP协议和以太网, DNS][IP_ DNS]

[计网之HTTP协议][HTTP]

## 1. 输入网址 ##

当在浏览器中输入 URL 后敲下回车, 浏览器会对输入的信息进行以下判断:

1.  检查输入的内容是不是一个合法的 URL 链接还是一个待搜素的关键词.
2.  如果是合法的URL链接, 判断输入的URL是不是一个完整的URL, 如果不是, 浏览器就会自己猜测, 然后补全这个URL.
3.  如果是一个待搜索的关键词, 浏览器就会结合用户设置的默认搜索引擎的 URL 来进行搜索.

## 2. 进行DNS域名解析 ##

**DNS 是由解析器和域名服务器组成的, 作用是将域名转化成 IP 地址.**

我们平时在浏览器中输入的网址, 其实就是域名, 当我们输入网址按下回车时, 就发起了一个 GET 请求, 此时浏览器的 DNS 系统首先要做的事情就是解析这个域名, 将域名转化成 IP 地址.

通俗的讲, 我们更习惯于记住一个网站的名字, 比如 www.baidu.com, 而不是记住它的 IP 地址, 比如: 167.23.10.2; 而计算机更擅长记住网站的 IP 地址, 而不是像 www.baidu.com 等链接; 类比一下, 其实 DNS 就相当于一个电话本, 你要找 www.baidu.com 这个域名, 那就去翻一翻电话本, 就能知道它的电话 (IP) 是 167.23.10.2.

## 3. 进行封装 ##

浏览器拿到域名对应的 IP 地址之后, 就可以构造出 HTTP 数据报, 将其交给传输层, 会以一个随机端口 (1024~65535) 向服务器的 Web 程序的 80 端口 (是服务器侦听网页客户端请求的默认端口) 发起 TCP 的连接请求 (**三次握手**) , 接着将数据交给了网络层, IP协议将其封装成立IP数据报, 然后交给数据链路层, 转换成二进制形式的比特 (bit) 流, 从网卡发送出去, 再把比特转换成电子, 光学或微波信号在网络中传输最终通过网卡传输出去.

## 4. 进行传输 ##

传输的过程中, 经过一些网络设备, 交换机和路由器等;

*  交换机把数据分用到数据链路, 再重新封装, 继续转发.
 *  路由器会把数据分用到网络层, 重新封装, 接着路由器会根据数据报中的目的 IP 在路由表中匹配, 找个合适的方向发出去, 每次转发 TTL 都会减1 (TTL 是一个 IP 协议的值, 它告诉网络, 数据包在网络中的时间是否太长而应被丢弃).

## 5. 服务器接收请求, 根据请求计算响应, 重新封装, 返回响应 ##

服务器通过监听端口来获取到客户端的 HTTP 请求, 与客户端建立 TCP 连接后, 服务器开始接收客户端发来的数据, 首先进入到网卡, 然后是进入到内核的 TCP/IP 协议栈分用数据 (用于识别该连接请求, 解封包, 一层一层的剥开), 终通过 HTTP 解码, 从接收到的数据中进行解析, 找到你想要访问的那个资源, 将资源构造成 HTTP 响应, 再将响应层层封装发送给客户端浏览器.

这样一个 HTTP 通信就完成了, 服务器会根据 HTTP 请求中的 Connection 字段, 决定是否关闭 TCP 连接通道, Connection 字段值为 keep-alive 时, 服务器不会立刻关闭连接, 保证通信的完成.

## 6. 浏览器接收响应, 进行渲染页面, 最终呈现一个完整的页面 ##

浏览器接收到响应内容之后, 还是先对数据进行分用, 最后浏览器会解析 HTML 文件生成主页框架(构建 dom 树), JS 的解析是由浏览器中的 JS 解析引擎完成的, 比如谷歌的是 V8.

在解析过程中, 如果同时遇到请求外部资源时, 如图片, 外链的 CSS 等静态资源的引用, 会向服务器继续发送请求, 请求的内容就是主页里的一些资源, 例如图片, 视频, JS文件等…

这些请求过程是异步的, 并不会影响 HTML 页面进行加载.

## 7. 断开连接 ##

此时整个过程结束, 最后通过**四次挥手**, 浏览器和客户端的连接.

[img]: https://img-blog.csdnimg.cn/img_convert/12c2d64b00ba707c7b7f603db51f30b4.png
[img 1]: https://img-blog.csdnimg.cn/img_convert/8f87d61b790e4e9fc0e7729a775bf163.png
[Link 1]: https://blog.csdn.net/Trong_/article/details/128945391?spm=1001.2014.3001.5502
[UDP_TCP]: https://blog.csdn.net/Trong_/article/details/129099293?spm=1001.2014.3001.5502
[IP_ DNS]: https://blog.csdn.net/Trong_/article/details/129161631?spm=1001.2014.3001.5502
[HTTP]: https://blog.csdn.net/Trong_/article/details/129579084?spm=1001.2014.3001.5502