一,URL解析
浏览器会对输入的 URL(统一资源定位符) 进行拆解,搞清楚 “目标是谁、要获取什么资源
https://www.baidu.com/s?wd=CDN
拆解后:
协议(Scheme):https
(加密通信协议,比 HTTP 更安全);
- 协议(Scheme):
https
(加密通信协议,比 HTTP 更安全); - 域名(Domain):
www.baidu.com
(要访问的服务器 “名字”,相当于 “门牌号”); - 路径(Path):
/s
(服务器上的具体 “文件夹”,对应百度搜索功能); - 参数(Query):
wd=CDN
(要传递给服务器的 “指令”,即 “搜索关键词是 CDN”)。
浏览器解析完后将会使用HTTPS协议,默认端口号为443,同时会将域名和需要请求的资源分开,从而了解需要请求的是哪个服务器,请求的是服务器上什么资源。
二,DNS域名解析
知道域名后,浏览器通过解析域名获取目标服务器的IP地址,由域名转换得到 IP 地址就是 DNS 协议做的事情。
1,缓存查询
浏览器缓存查询:先查浏览器本地缓存(比如之前访问过百度,浏览器已保存
www.baidu.com
对应的 IP),有则直接用,无则进入下一步;操作系统缓存查询:查电脑 / 手机系统的 DNS 缓存(如 Windows 的
hosts
文件、手机系统缓存),有则用,无则进入下一步;本地 DNS 服务器查询:向你网络运营商(如电信、联通)分配的 “本地 DNS 服务器” 发起查询(这是最常用的一步),运营商服务器通常已缓存主流域名的 IP,有则返回,无则进入最后一步;
2,直接查询
根域名服务器 → 顶级域名服务器 → 权威域名服务器查询:
先查 “根域名服务器”(全球共 13 组,负责指引方向),根服务器会告诉本地 DNS:“com 后缀的域名归顶级域名服务器管”;
本地 DNS 再查 “.com 顶级域名服务器”,顶级服务器会告诉它:“baidu.com 的域名归百度自己的权威域名服务器管”;
最后查 “百度权威域名服务器”,它会返回 www.baidu.com 对应的 真实 IP 地址(如 180.101.49.11)。
3,cdn的dns查询
1,什么是·cdn
CDN 即内容分发网络(Content Delivery Network),是一种分布式的服务器网络,旨在通过将内容缓存到多个地理位置的服务器上,加速内容的分发和传递。(最优路径
CDN 的 DNS(通常是 CDN 厂商提供的 “权威 DNS”,如阿里云 CDN 的 DNS、Cloudflare 的 DNS)会结合用户场景、节点状态动态选择 IP,核心逻辑包括:
基于用户地理位置:通过用户的本地 DNS IP(或 HTTP 请求中的地理位置信息)判断用户所在区域,返回该区域的 CDN 边缘节点 IP(比如上海用户返回上海的 CDN 节点,广州用户返回广州的 CDN 节点);
基于网络运营商:区分用户是电信、联通、移动还是广电网络,返回对应运营商的 CDN 节点 IP(避免跨运营商访问的网络延迟,比如电信用户不返回联通节点);
基于节点负载 / 健康度:实时检测 CDN 节点的带宽占用、服务器负载、故障状态,若某个节点负载过高或故障,自动跳过该节点,返回其他健康节点的 IP;
基于访问策略:支持按业务需求定制解析(比如给 VIP 用户分配带宽更充足的节点,给测试用户分配特定测试节点)。
三,建立TCP链接
拿到目标 IP(服务器 IP 或 CDN 节点 IP)后,浏览器会通过 TCP 协议 与目标服务器建立 “可靠的双向通信通道”,这个过程就是经典的 TCP 三次握手(确保双方都能正常收发数据):
1,第一次握手(客户端发请求):
浏览器(客户端)向服务器发送一个 “SYN” 数据包,意思是 “我想和你建立连接,你准备好了吗?”;
2,第二次握手(服务器回响应):
服务器收到 SYN 后,回复 “SYN+ACK” 数据包,意思是 “我准备好了,你也准备好吧?”;
3,第三次握手(客户端确认):
浏览器收到 SYN+ACK 后,再发一个 “ACK” 数据包,意思是 “我也准备好了,连接可以建立了!”。
三次握手完成后,客户端和服务器之间的 “双向通道” 正式打通,接下来可以传输数据了。
四,TLS四次握手
1,什么是·TLS
TLS(Transport Layer Security,传输层安全协议)是一种用于在网络通信中保障数据隐私、完整性和身份真实性的加密协议,主要作用是在客户端(如浏览器)和服务器(如网站服务器)之间建立安全的 “加密通道”,防止数据在传输过程中被窃取、篡改或伪造。
2,具体流程
如果 URL 协议是 HTTPS
(而非 HTTP
),在 TCP 连接建立后,还会额外进行 TLS 握手(加密通道建立),防止数据在传输中被窃取、篡改(比如你输入的密码、支付信息)。
以 TLS 1.3 为例(主流版本,比旧版本更快),核心流程是:
1,第一次握手
客户端向服务器发送 “TLS 版本、支持的加密算法列表、随机数 A”;
2,第二次握手
服务器回复 “确认的 TLS 版本、选定的加密算法、随机数 B、服务器证书(证明自己是真实网站,非钓鱼)”;
3,第三次握手
客户端验证服务器证书(通过操作系统 / 浏览器内置的 “根证书” 验证,确保证书有效),然后用 “随机数 A + 随机数 B + 证书公钥” 生成一个 “会话密钥”,发给服务器;
4,第四次握手
服务器用自己的 “私钥” 解密拿到会话密钥,双方确认 “后续数据都用这个会话密钥加密传输”。
TLS 握手完成后,后续的所有数据(如浏览器的请求、服务器的响应)都会被加密,即使被中间设备拦截,也无法破解。
TCP 三次握手完成后,浏览器与目标服务器之间就建立了一个可靠的虚拟通道。如果URL中使用的是http协议,那么浏览器就可以发起HTTP请求了。
五,浏览器发起请求
1,发送请求
加密通道(或 TCP 通道)建立后,浏览器会向服务器发送 HTTP 请求报文,明确 “要获取的资源、请求参数、自身信息”。
2,请求报文结构
请求报文的核心内容(以 GET 请求为例)包括:
请求行:GET /s?wd=CDN HTTP/1.1
(请求方法:GET;请求路径:/s;请求参数:wd=CDN;HTTP 版本:1.1);
请求头:包含浏览器信息(如 User-Agent: Chrome/120.0.0.0
)、接受的文件格式(如 Accept: text/html, image/png
)、Cookie(如登录状态)等;
请求体:GET 请求无请求体(参数在 URL 里),POST 请求(如表单提交)会在这里放参数(如用户名、密码)
六,服务器响应
服务器(或 CDN 节点)收到 HTTP 请求后,会按以下逻辑处理并返回响应:
1,解析请求服务器
读取请求行、请求头,明确 “用户要什么资源、用什么浏览器、有没有登录”;
2,处理业务逻辑:
若请求的是静态资源(如图片、CSS、JS,且 CDN 节点有缓存):CDN 节点直接从本地缓存读取资源,无需回源;
若请求的是动态资源(如百度搜索结果、用户个人中心):服务器会执行代码(如查询数据库、计算结果),生成动态内容(如搜索结果页面的 HTML);
若请求的资源不存在:服务器会生成 “404 Not Found” 错误页面
3,返回响应报文
状态行:
HTTP/1.1 200 OK
(HTTP 版本:1.1;状态码:200 表示成功,404 表示资源不存在,500 表示服务器错误);响应头:包含资源类型(如
Content-Type: text/html
表示是 HTML 页面)、资源大小(如Content-Length: 1024
)、缓存策略(如Cache-Control: max-age=3600
表示缓存 1 小时)等;响应体:实际的资源内容(如 HTML 代码、图片二进制数据、JSON 数据)。
七,浏览器渲染
1,解析 HTML,生成 DOM 树:
浏览器读取 HTML 代码,按标签层级(如 <html>
→ <body>
→ <div>
)生成 “文档对象模型(DOM)”,描述页面的结构;
2,解析 CSS,生成 CSSOM 树:
读取 CSS 代码(包括 <style>
标签、外部 CSS 文件),生成 “CSS 对象模型(CSSOM)”,描述页面的样式(如字体大小、颜色、布局);
3,结合 DOM 和 CSSOM,生成渲染树:
只保留 “需要显示的节点”(如隐藏的 display: none
节点会被剔除),并为每个节点附加样式,形成 “渲染树”;
4,布局(Layout)→ 绘制(Paint)→ 合成(Composite):
- 布局:计算渲染树中每个节点的位置、大小(如
<div>
放在页面左上角,宽 200px,高 100px); - 绘制:按布局结果,将节点的颜色、背景、图片等 “画” 在浏览器的 “画布” 上;
- 合成:将绘制好的 “图层”(如文字层、图片层)合并成一个完整的页面,显示在浏览器窗口中。
九,TCP断开连接
八,总结
1,本质
从输入 URL 到页面呈现,本质是 “寻址→建通道→发请求→处理→响应→渲染” 的闭环:
- DNS 负责 “寻址”(找服务器 / CDN 节点);
- TCP/TLS 负责 “建通道”(可靠 + 安全);
- HTTP 负责 “传数据”(请求 + 响应);
- 浏览器负责 “转结果”(渲染成可视化页面)。
2,压缩总结
URL明确目标 --> DNS域名解析(CDN找最优路线) --> TCP三次握手连接通道 --> TLS加密
--> HTTP请求 --> HTTP响应 --> 浏览器渲染 --> TCP四次分手断开连接