B/S 架构通信原理详解
一、核心架构
Browser/Server（浏览器/服务器）模型：
- 前端：浏览器作为统一客户端（Chrome/Firefox/Edge等）
- 后端：服务器处理业务逻辑+数据存储（Nginx/Apache/Tomcat等）
- 通信协议：基于 HTTP/HTTPS 的请求-响应模型
二、完整通信流程
sequenceDiagram
participant 用户
participant 浏览器
participant DNS
participant 服务器
participant 数据库
用户->>浏览器： 输入URL/点击链接
浏览器->>DNS： 域名解析请求
DNS-->>浏览器： 返回IP地址
浏览器->>服务器： TCP三次握手
浏览器->>服务器： 发送HTTP请求
alt 动态资源
服务器->>数据库： 数据查询/更新
数据库-->>服务器： 返回数据
end
服务器->>浏览器： 返回HTTP响应
浏览器->>浏览器： 渲染页面+加载资源
浏览器->>服务器： 断开TCP连接
1. 用户发起请求
- 触发方式：URL输入/链接点击/表单提交
- 示例：
https://www.example.com/login
2. DNS解析过程
| 步骤 |
操作 |
结果 |
| 1 |
检查浏览器缓存 |
命中则直接使用 |
| 2 |
检查系统hosts文件 |
本地静态映射 |
| 3 |
请求本地DNS服务器 |
ISP提供解析服务 |
| 4 |
递归查询根域名服务器 |
获得顶级域服务器地址 |
| 5 |
查询权威DNS服务器 |
最终获取IP地址 |
3. 建立网络连接
- HTTPS额外进行TLS握手（非对称加密协商会话密钥）
4. HTTP请求组成
POST /login HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Content-Type: application/x-www-form-urlencoded
Cookie: session_id=abc123
username=admin&password=123456
- 请求行：方法(POST/GET) + 路径 + 协议版本
- 请求头：Host/User-Agent/Cookie等元数据
- 请求体：表单数据/JSON等有效载荷
5. 服务器处理流程
6. HTTP响应示例
HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Set-Cookie: session_id=xyz789
Cache-Control: max-age=3600
<!DOCTYPE html>
<html>
<body>登录成功！</body>
</html>
- 状态行：状态码(200/404/500) + 状态消息
- 响应头：Content-Type/Set-Cookie等控制信息
- 响应体：HTML/JSON/图片等实际数据
7. 浏览器渲染关键步骤
- 解析HTML构建DOM树
- 解析CSS构建CSSOM树
- 合并生成渲染树（Render Tree）
- 布局计算（Layout）
- 绘制显示（Painting）
- 执行JavaScript（可能修改DOM/CSSOM）
三、关键技术特性
1. 无状态协议解决方案
| 技术 |
实现方式 |
应用场景 |
| Cookie |
服务器Set-Cookie → 浏览器存储 |
会话标识 |
| Session |
服务端存储用户状态 + ID关联Cookie |
购物车/登录状态 |
| Token |
加密凭证包含用户信息 |
JWT认证 |
| URL重写 |
在URL中附加session_id参数 |
浏览器禁用Cookie |
2. 连接管理演进
| HTTP版本 |
特性 |
性能提升 |
| 1.0 |
短连接（每次请求新建连接） |
无 |
| 1.1 |
持久连接（Keep-Alive） |
减少TCP握手开销 |
| 2.0 |
多路复用（Multiplexing） |
并行传输多个请求/响应 |
| 3.0 |
QUIC协议（基于UDP） |
解决队头阻塞问题 |
3. 安全机制
- HTTPS加密流程：
- 客户端发送加密套件支持列表
- 服务器返回证书+公钥
- 验证证书有效性（CA链）
- 生成会话密钥（非对称加密保护）
- 建立安全通道（对称加密通信）
四、B/S架构优劣势
| 优势 |
劣势 |
| ✅ 零客户端安装（跨平台） |
❌ 依赖网络连接 |
| ✅ 集中式升级维护 |
❌ 服务器性能瓶颈 |
| ✅ 天然跨平台兼容 |
❌ 复杂交互体验受限 |
| ✅ 数据安全可控 |
❌ 首次加载性能低 |