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. 建立网络连接

SYN 2. SYN-ACK 3. ACK 浏览器服务器

HTTPS额外进行TLS握手（非对称加密协商会话密钥）

4. HTTP请求组成

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. 服务器处理流程

静态资源动态资源接收请求资源类型直接读取文件转发到应用服务器执行业务逻辑访问数据库生成响应内容返回HTTP响应

6. HTTP响应示例

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加密流程 ：
1. 客户端发送加密套件支持列表
2. 服务器返回证书+公钥
3. 验证证书有效性（CA链）
4. 生成会话密钥（非对称加密保护）
5. 建立安全通道（对称加密通信）

四、B/S架构优劣势

优势	劣势
✅ 零客户端安装（跨平台）	❌ 依赖网络连接
✅ 集中式升级维护	❌ 服务器性能瓶颈
✅ 天然跨平台兼容	❌ 复杂交互体验受限
✅ 数据安全可控	❌ 首次加载性能低