从输入 URL 到页面展示，浏览器到底经历了什么？

当在浏览器地址栏输入一个网址，比如 https://www.example.com 并按下回车，短短几百毫秒内，屏幕上就出现了完整的网页。
看似简单的一次操作，实际上背后经历了 多个复杂的网络与浏览器内部过程。

今天笔者就来系统地拆解这整个流程，从输入到渲染，逐步还原“浏览器的心路历程”。

题外、HSTS 机制

由于安全隐患，会使用 HSTS 强制客户端使用 HTTPS 访问页面。当你的网站均采用 HTTPS，并符合它的安全规范，就可以申请加入 HSTS 列表，之后用户不加 HTTPS 协议再去访问你的网站，浏览器都会定向到 HTTPS。

一、URL 解析：浏览器理解你想访问哪里

浏览器首先会分析你输入的内容，判断它是：

一个合法的 URL（如 https://example.com）
还是一个搜索关键字（如 “天气预报”）

若是 URL，浏览器会将其解析为：

协议（scheme）: https
主机名（host）: www.example.com
端口（port）: 443（https默认）
路径（path）: /

💡 HTTPS 是基于加密的 HTTP 协议，端口号为 443。

二、DNS 解析：把域名变成 IP 地址

浏览器知道了要访问的主机名（如 www.example.com），
但真正的通信是在 IP 地址 之间进行的，因此需要先进行 DNS 解析。

DNS（Domain Name System）会将域名转换成服务器的 IP 地址。
解析过程一般分为四步：

浏览器缓存：先查看本地是否已缓存该域名的 IP；
操作系统缓存：若浏览器没有，再查操作系统缓存；
本地 DNS 服务器：通常由 ISP（网络服务提供商）提供；
权威 DNS 服务器：若前面都找不到，向根域名服务器逐层查询(根域名服务器 → 顶级域名服务器 → 二级域名服务器 → 权威域名服务器)。

解析结果可能是：

1	www.example.com → 203.1.1.1

🧠 若网站使用了 DNS 负载均衡，同一个域名可能返回不同 IP，分发到不同机房的服务器上。

三、建立连接：TCP 三次握手

拿到服务器 IP 后，浏览器与服务器之间开始建立 TCP 连接。
TCP 是一种可靠的传输协议，确保数据能完整、有序地送达。

三次握手过程：

客户端 → 服务器：SYN（我要连接你）
服务器 → 客户端：SYN + ACK（我同意连接）

SYN 攻击
服务器端的资源分配是在二次握手时分配的，而客户端的资源是在完成三次握手时分配的，所以服务器容易受到 SYN 洪泛攻击。SYN 攻击就是 Client 在短时间内伪造大量不存在的 IP 地址，并向 Server 不断地发送 SYN 包，Server 则回复确认包，并等待 Client 确认，由于源地址不存在，因此 Server 需要不断重发直至超时，这些伪造的 SYN 包将长时间占用未连接队列，导致正常的 SYN 请求因为队列满而被丢弃，从而引起网络拥塞甚至系统瘫痪。SYN 攻击是一种典型的 DoS/DDoS 攻击。

客户端 → 服务器：ACK（确认收到）

三次握手完成后，连接正式建立。

🔒 若使用 HTTPS，还会在此之后进行 TLS 握手，协商加密算法和密钥。

四、发送 HTTP 请求

连接建立后，浏览器会向服务器发送一条 HTTP 请求报文，请求页面内容：

GET / HTTP/1.1
Host: www.example.com
User-Agent: Chrome/141.0
Accept: text/html
Connection: keep-alive

服务器收到请求后，根据路径 / 查找对应的资源（通常是 index.html）。

五、服务器响应 HTTP 报文

服务器处理请求后返回响应：

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1256
Cache-Control: max-age=3600

<html>...</html>

浏览器接收到响应报文后，开始解析 HTML 内容。

💡 若是重定向（301、302），浏览器会根据响应头 Location 再次请求新的 URL。

六、浏览器渲染引擎登场：从 HTML 到像素

浏览器是多进程的，主要分为：

浏览器主进程：只有一个，主要控制页面的创建、销毁、网络资源管理、下载等。
第三方插件进程：每一种类型的插件对应一个进程，仅当使用该插件时才创建。
GPU 进程：最多一个，用于 3D 绘制等。
浏览器渲染进程(浏览器内核)：每个 Tab 页对应一个进程，互不影响。

1️⃣ 解析 HTML，构建 DOM 树

Bytes -> Character -> Token -> nodes -> DOM

浏览器读取 HTML 文档，生成 DOM（Document Object Model） 结构。

2️⃣ 加载外部资源

遇到 <link>、<script>、<img> 等标签时，浏览器会发起新请求。
这些请求可能会触发：

DNS 预解析（dns-prefetch）
预连接（preconnect）
资源预加载（preload / prefetch）

3️⃣ 解析 CSS，生成 CSSOM 树

Bytes -> Character -> Token -> nodes -> CSSOM

CSS 文件下载完成后，浏览器解析样式，生成 CSSOM（CSS Object Model）。

4️⃣ 合并 DOM 与 CSSOM，生成 Render Tree（渲染树）

渲染树用于描述每个节点的样式和位置。一般来说，渲染树和 DOM 树相对应的，但不是严格意义上的一一对应,因为有一些不可见的 DOM 元素不会插入到渲染树中，如 head 这种不可见的标签或者 display: none 等

渲染流程：

获取 DOM 后分割为多个图层
对每个图层的节点计算样式结果（Recalculate style–样式重计算）
为每个节点生成图形和位置（Layout–重排,回流）
将每个节点绘制填充到图层位图中（Paint–重绘）
图层作为纹理上传至 GPU
组合多个图层到页面上生成最终屏幕图像（Composite Layers–图层重组）

5️⃣ 布局（Layout/Reflow）

计算每个元素的大小、位置、层级。

Layout，也称为 Reflow，即回流。一般意味着元素的内容、结构、位置或尺寸发生了变化，需要重新计算样式和渲染树
Repaint，即重绘。意味着元素发生的改变只是影响了元素的一些外观之类的时候（例如，背景色，边框颜色，文字颜色等），此时只需要应用新样式绘制这个元素就可以了

6️⃣ 绘制（Painting）

绘制阶段，系统会遍历呈现树，并调用呈现器的“paint”方法，将呈现器的内容显示在屏幕上。

💡 现代浏览器为了性能，会把绘制工作交给 GPU（硬件加速）。

七、JavaScript 执行与页面交互

浏览器的 JS 引擎（如 V8） 负责解析和执行 JavaScript 脚本。

修改 DOM 或 CSSOM 会触发页面 重排（Reflow） 或 重绘（Repaint）；
异步请求（如 fetch、XHR）会在事件循环中被调度执行；
页面变得可交互（Interactive）。

八、页面完全加载（Load）

当：

所有资源（HTML、CSS、JS、图片等）都加载完成；
并且脚本的 DOMContentLoaded 与 onload 事件触发；

页面即处于 完全渲染状态，用户可自由操作。

九、性能优化点回顾

阶段	可用优化技术
DNS 阶段	`dns-prefetch`、CDN、DNS 缓存
TCP 阶段	HTTP/2、长连接、TLS Session 复用
传输阶段	压缩（gzip / br）、缓存（cache-control）
渲染阶段	代码压缩、关键渲染路径优化、懒加载、CSS 优化
JS 阶段	异步加载（`async`/`defer`）、减少重绘重排

✨ 总结

“输入 URL → 页面展示”
是一次浏览器与服务器、操作系统、网络协议、渲染引擎多方协作的过程。

完整流程如下：

URL 解析
→ DNS 解析
→ TCP（三次握手）
→ TLS（加密协商）
→ 发送 HTTP 请求
→ 服务器响应
→ 浏览器解析 HTML/CSS/JS
→ 构建渲染树
→ 布局与绘制
→ 页面呈现