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

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

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

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

主要是如下过程:

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

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

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

计网传输层协议:UDP和TCP

计网之IP协议和以太网, DNS

计网之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. 断开连接

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