前言
当我们在浏览器地址栏输入网址，回车访问网站时，看似简单的操作，背后有很多看不到的网络协议和 Web 渲染协作、信息流传递等过程。
以时间顺序，从浏览器地址栏输入 URL 开始，深入讨论一下这个原理。
一、URL 解析与协议选择
以一个典型 URL 为例：https://example.com:443/dir/index.htm?uid=1#ch1
图一：完整的地址栏 URL 剖析
协议 (https://)：指示浏览器应使用何种协议与服务器通信。
- HTTP：超文本传输协议，是 Web 内容传输的基础，定义了浏览器与服务器之间的请求和响应格式，是无连接无状态的。
- HTTPS：在 HTTP 之上增加了传输层安全（TLS/SSL）协议进行加密，保障数据传输的机密性、完整性和认证性。
我们探讨的以 HTTP(S) 协议为主。
举个例子，你在网上购物、冲浪，这些都是通过 HTTP(S) 协议进行的：
- HTTP：就像你给服务器写了一封信（请求），服务器收到后回了一封信（响应）。它是无状态的，服务器不记得你上一次做了什么。
- HTTPS：在 HTTP 的基础上加了一层安全锁（TLS/SSL 加密）。你的”信”在传输过程中会被加密，别人看不懂。
HTTP(S) 的沟通方式就像”你问我答”：浏览器发出请求，服务器给出响应。
域名 (example.com)：方便用户记忆的人类可读地址。
端口号 (:443)：指定服务器上提供服务的特定通道。HTTP 默认 80 端口，HTTPS 默认 443 端口，这是协议的缺省端口，所以我们访问网站时不需要手动输入。
理论上，Web 服务可以构建在任何端口之上，比如本地开发时常用 8080。
文件路径 (/dir/index.htm)：请求资源在服务器上的确切位置。
查询字符串 (?uid=1)：以问号开头，用键值对形式传递额外参数，常用于动态过滤、搜索、会话管理等。
片段标识符 (#ch1)：以井号开头，用于定位页面内的特定区域。这部分不会被发送到服务器，仅由浏览器处理。
二、匹配 IP 和 URL：DNS 解析
浏览器解析 URL 知道域名后，网络设备之间无法直接通过域名通信，需要进一步获取服务器的 IP 地址。这就是域名系统（DNS）解析的工作。
IP 分类
- 公网 IP：可以在互联网上被直接访问的全球唯一 IP 地址
- 内网 IP：只在局域网内部有效，常见段有
10.x.x.x、172.16-31.x.x、192.168.x.x- 回环地址：
127.0.0.1和localhost，指向本机自己，用于本地测试
1. 什么是 DNS？
DNS (Domain Name System) 是位于应用层的协议，被誉为”互联网的电话簿”。它提供域名到 IP 地址的映射服务。
2. DNS 解析流程
- 本地查询：浏览器检查自身 DNS 缓存，未命中则查询操作系统本地缓存和
hosts文件 - 递归查询：操作系统将请求提交给本地 DNS 服务器（通常由 ISP 或路由器提供）
- 迭代查询：本地 DNS 服务器发起一系列迭代查询：
- 查询根 DNS 服务器（负责顶级域名如
.com、.org） - 根服务器返回 TLD 服务器地址
- 查询 TLD 服务器，得到权威域名服务器地址
- 向权威域名服务器查询，最终返回 IP 地址
- 查询根 DNS 服务器（负责顶级域名如
- IP 地址逐级返回到浏览器，并被各级缓存
DHCP：你的设备通过动态主机配置协议（DHCP）自动获取 IP 地址、子网掩码、默认网关以及 DNS 服务器地址。
常用公共 DNS：Google DNS (
8.8.8.8)、Cloudflare DNS (1.1.1.1)、阿里 DNS (223.5.5.5)
3. DNS 安全问题
常见威胁：
- DNS 劫持：恶意修改 DNS 解析结果
- DNS 污染：返回错误的 IP 地址
- DDoS 攻击：大量请求导致服务不可用
- 缓存投毒：污染 DNS 缓存
安全措施：DNSSEC、DoH（DNS over HTTPS）、DoT（DNS over TLS）
传统 DNS 查询是明文传输的，存在被劫持或污染的风险。自建 DoH 可以很大程度上避免这些问题。各大运营商有时会屏蔽或间歇性阻断某些 DNS，导致同一网站在移动和联通下访问结果不同。
图二：Edge 浏览器 DoH 设置
当你在终端 ping 域名 时可以看到服务器地址：
图三：Ping 命令查看服务器 IP
大部分情况下得到的是 CDN 的 IP 而不是源站 IP（如图四），这是为了安全起见——暴露源站 IP 会导致 DDoS 风险：
图四：IP 地理位置查询示例
三、建立连接：TCP 三次握手
浏览器获取到服务器 IP 后，不能马上发送 HTTP 请求，需要先建立稳定的通信通道。这由传输层的 TCP 通过”三次握手”完成。
TCP/IP 协议族概览
TCP/IP 协议族是互联网的基础，将复杂的网络通信抽象为多个层次。
可以把 TCP/IP 协议族想象成一个多层包裹系统：
1. 应用层：HTTP(S)、FTP、SMTP、DNS 等，直接和应用程序打交道。
2. 传输层：
- TCP：像谨慎的快递员，确保数据安全、完整、按顺序地传输，会反复确认和重发。HTTP(S) 依赖 TCP 传输。
- UDP：像迅速的邮递员，只管发出，不关心是否收到。速度快但不可靠，适合在线视频会议、实时游戏。
3. 网络层：IP 协议负责找到最佳路径，把数据包从起点送到终点。
4. 数据链路层：数据被封装成”帧”，处理相邻设备之间的传输。
5. 物理层：将数据转换为电信号、光信号或无线电波进行传输。
TCP 三次握手原理：
图四：TCP 三次握手示意图
- 第一次握手（SYN）：客户端发送 SYN 包，表示”我想与你建立连接，我的初始序列号是 X”
- 第二次握手（SYN-ACK）：服务器同意后，发送 SYN-ACK 包，表示”收到，同意建立连接，我的序列号是 Y，确认收到 X+1”
- 第三次握手（ACK）：客户端发送 ACK 包，表示”收到，可以开始发数据了，确认收到 Y+1”
至此，客户端和服务器之间建立了可靠的双向通信通道。
四、客户端-服务器通信
TCP 连接建立后，浏览器依据 HTTP(S) 协议发送请求并接收响应，涉及数据在协议栈中的封装、路由、解封装。
1. 数据包的封装、传输与解封装
当浏览器发起 HTTP(S) 请求时，数据从应用层开始自上而下封装：
- 应用层：生成 HTTP(S) 报文，HTTPS 内容在此加密
- 传输层：报文被 TCP 分割成小段，添加 TCP 头部（端口号、序号等）
- 网络层：TCP 报文段加上 IP 头部（源 IP 和目标 IP），形成 IP 数据包
- 数据链路层：IP 数据包加上帧头部（MAC 地址等），形成数据帧
- 物理层：数据帧转换为电信号通过物理媒介发送
封装后的数据包经过路由器逐跳转发，最终抵达目标服务器。
NAT（网络地址转换）
家庭和企业网络中，多个内部设备通过一个路由器共享同一个公网 IP。路由器通过 NAT 将内网 IP 和端口转换为公网 IP 和新端口，响应回来时再反向映射。这解决了 IPv4 地址紧缺问题，同时增强了内网安全性。
2. HTTP/HTTPS 请求与响应
HTTP 请求包括：
- 请求行：HTTP 方法（GET、POST、PUT、DELETE）、URI、HTTP 版本
- 请求头：
User-Agent、Accept、Cookie、Referer等 - 请求体：POST 方法中包含发送给服务器的数据
HTTP 响应包括：
- 状态行：状态码（
200 OK、404 Not Found、500 Internal Server Error） - 响应头：
Content-Type、Set-Cookie、Cache-Control等 - 响应体：实际返回的 HTML、CSS、JS、图片等
以 Postman 发送 GET 请求到 bing.com 为例，得到 200 OK 及响应：
五、从数据到像素：关键渲染路径
浏览器接收到 HTML、CSS、JS 等资源后，经过一系列处理步骤将原始数据转化为用户可见的像素——这被称为”关键渲染路径（Critical Rendering Path, CRP）”。
构建 DOM 树：浏览器解析 HTML，转换为内存中的树状结构（Document Object Model）。
构建 CSSOM 树：浏览器解析 CSS，构建 CSS Object Model 树，包含所有样式规则。
JavaScript 编译和执行：遇到 <script> 标签时，通常暂停 HTML 解析，优先下载、解析、编译并执行 JS。async 和 defer 属性可以改变这种阻塞行为。
JavaScript 水合（Hydration）
在使用 React、Vue 等框架的 SSR 应用中，服务器先生成 HTML 发给浏览器，浏览器可以立即显示静态内容（首屏渲染）。当 JS 下载并执行完毕后，框架将其”连接”到已有的 HTML 结构上，使其变得可交互，这个过程叫”水合”。
构建渲染树：浏览器将 DOM 树和 CSSOM 树结合，创建只包含可见元素的渲染树（head 和 display: none 的元素不在其中）。
布局（Layout / Reflow）：计算渲染树中每个可见元素在视口内的确切位置和大小。DOM 结构或样式改变都可能触发回流。
绘制（Paint）：根据渲染树的节点及样式信息，将页面内容逐层绘制到屏幕上（文本、背景、边框、图片等）。
合成（Compositing）：将多个绘制层组合在一起，形成最终屏幕图像。通常利用 GPU 加速，处理 CSS 的 transform、opacity 等属性。
八、TCP 四次挥手：结束连接
所有内容加载完毕，通信不再需要时，为安全有序地终止 TCP 连接，执行四次挥手：
图六：TCP 四次挥手示意图
- 第一次挥手（FIN）：客户端发送 FIN 包，表示”我没有数据要发了，请求关闭连接”
- 第二次挥手（ACK）：服务器发送 ACK 确认，此时服务器可能还有数据要发
- 第三次挥手（FIN）：服务器数据发完后，也发送 FIN 包，表示”我也没数据了”
- 第四次挥手（ACK）：客户端发送 ACK 确认，进入
TIME_WAIT状态，等待一段时间后彻底关闭
通过这四次交互，TCP 连接被安全完整地终止。
参考文献
如果这篇文章对你有帮助，欢迎分享给更多人！
部分信息可能已经过时