浏览器输入网址后发生了什么？

同一个网址，这次一按回车就秒开，下次却一直转圈。差别到底出在哪里？

从你按下回车，到页面出现在眼前，可以按五步理解：查缓存 → 找地址 → 建连接 → 发请求拿响应 → 把页面画出来。实际访问时，有些步骤可以省略，有些工作会同时进行。

五步走完一次访问

1. 查缓存#▶ 从这里看

浏览器先检查本地有没有可用的缓存。上次访问时保存的网页内容、图片、样式文件，都可能在这次访问中再次使用。

能不能直接使用，要看缓存规则。服务器可以通过响应头里的 Cache-Control 指定这些规则，例如 max-age=3600 表示响应的新鲜期为 3600 秒。缓存仍然新鲜，而且规则允许直接使用时，浏览器就不用为这个资源发送网络请求。¹

所以，经常访问的网站可能打开得更快。不过，存过不代表随时能用；本地没有、或者不能直接使用的资源，仍然需要通过网络请求获取。

接下来，浏览器要先知道该连接哪个地址。

2. 找地址#▶ 从这里看

你在手机通讯录里搜索名字，找到的是电话号码。DNS 的作用与此类似：把网址中的域名，例如 example.com，解析成连接时需要的 IP 地址。

IP 地址用于在网络中定位通信目标。一个域名可以对应多个 IP 地址，也可能有多个域名使用同一个 IP 地址。

如果浏览器或操作系统已有可用的 DNS 缓存，就可以直接使用。否则，通常会向配置的递归解析器查询。递归解析器先检查自己的缓存，必要时再向其他 DNS 服务器查询，把结果返回给浏览器。²³

查到的结果通常会缓存一段时间，减少后续查询。有了地址，就可以建立连接。

3. 建连接#▶ 从这里看

以需要新建 TCP 连接的 HTTPS 访问为例，浏览器先建立 TCP 连接。可以把它理解成浏览器和服务器之间的一条通话线路：TCP 负责按顺序、可靠地传输数据。

建立连接时，浏览器发起连接，服务器回应，浏览器再确认，这就是 TCP 三次握手。双方借此交换并确认各自的初始序列号，为后续传输做好准备。⁴

网址使用 HTTPS 时，还需要进行 TLS 握手。浏览器检查服务器的证书，包括证书是否可信、是否与访问的域名匹配；双方通过密钥交换等过程生成会话密钥，用于加密后续通信，并检测数据是否被篡改。⁵

网络延迟高或丢包时，建立连接的这些来回就可能明显变慢。如果已有可复用的连接，浏览器通常可以省去重新建立连接的等待。

连接准备好，浏览器就能发送请求。

4. 发请求拿响应#▶ 从这里看

浏览器通过 HTTP 请求告诉服务器要获取什么。例如，访问 https://example.com/ 时，请求方法可以是 GET，目标是这个网站的首页。

服务器收到请求后，可能直接读取现成文件，也可能执行业务逻辑、查询数据库，再生成内容。比如购物车页面，就可能需要先读取你的购物车数据。

处理完成后，服务器返回 HTTP 响应。响应包含状态码、响应头，以及可能携带的响应内容：

• 200：请求成功。获取首页时，响应内容通常是 HTML。
• 404：通常表示没有找到请求的资源。
• 响应头：说明内容类型、缓存规则等信息。
• 响应体：承载 HTML、图片等具体内容。⁶⁷

拿到首页的 HTML 后，浏览器还会发现它引用的 CSS、图片等资源，并继续获取它们。这些资源也可能使用缓存或复用连接，多条请求可以同时进行。⁸

内容陆续到达，浏览器就开始把页面画出来。

5. 把页面画出来#▶ 从这里看

HTML 描述页面的内容和结构，例如哪里是标题、段落、按钮。浏览器解析 HTML，建立 DOM，用它表示这些元素及其关系。

CSS 描述页面的样式，包括颜色、字体、间距，以及元素如何排列。浏览器解析 CSS，再结合 DOM，计算各个元素应有的样式。

之后主要有两项工作：

1. 布局：计算元素的位置和大小。
2. 绘制：根据计算结果画出文字、背景、边框、图片等内容，最终显示到屏幕上。⁸

页面通常会逐步出现。影响首次显示的样式表可能让浏览器等待；图片则可能晚些到达，再补充显示。图片尺寸变化等情况，也可能引起重新布局。

因此，收到首页响应之后，浏览器还需要时间处理内容，才能让你看到页面。

为什么有时秒开、有时转圈

回到开头，同一个网页的快慢，可以对应到这五步：

• 查缓存：资源能直接使用本地缓存，就减少了网络请求。
• 找地址：已有可用的 DNS 缓存，就省去一次地址查询。
• 建连接：连接可以复用，或网络延迟低，等待就更少。
• 发请求拿响应：服务器处理慢、资源体积大、下载速度低，都会增加耗时。
• 把页面画出来：页面内容复杂，或者设备处理速度慢，即使资源已经到达，显示出来也需要时间。

这些因素可能同时出现。缓存可用、地址已知、连接可复用时，页面更容易秒开；需要重新获取大量资源，又遇到网络差或服务器忙，就可能一直转圈。¹⁸

想亲眼看看，可以打开浏览器开发者工具的 Network（网络）面板，再刷新页面。 找到首页文档请求，查看状态码、大小和 Timing（时间）信息，观察 DNS 查询、建立连接、等待响应、下载内容分别用了多久。某些分段没有出现，可能是因为使用了缓存或复用了连接。Network 主要展示请求过程，分析页面布局和绘制还需要结合 Performance（性能）面板。⁹

想一想

你遇到过同一个网页有时很快、有时加载很久的情况吗？

关注我，觉得有用就点赞、收藏

参考资料