B/S 架构通信原理详解
一、核心架构
Browser/Server（浏览器/服务器）模型：
- 前端：浏览器作为统一客户端（Chrome/Firefox/Edge等）
- 后端：服务器处理业务逻辑+数据存储（Nginx/Apache/Tomcat等）
- 通信协议：基于 HTTP/HTTPS 的请求-响应模型
二、完整通信流程
sequenceDiagramparticipant 用户participant 浏览器participant DNSparticipant 服务器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=abc123username=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架构优劣势
| 优势 | 劣势 |
|---|
| ✅ 零客户端安装（跨平台） | ❌ 依赖网络连接 |
| ✅ 集中式升级维护 | ❌ 服务器性能瓶颈 |
| ✅ 天然跨平台兼容 | ❌ 复杂交互体验受限 |
| ✅ 数据安全可控 | ❌ 首次加载性能低 |
