B/S 架构（浏览器/服务器架构）作为现代 Web 应用核心模式的定义与组成。文章阐述了其三层逻辑模型（表示层、业务逻辑层、数据访问层）及工作流程，对比了与传统 C/S 架构在跨平台性、维护成本等方面的优劣。同时分析了 B/S 架构面临的网络依赖、性能瓶颈及安全挑战，并列举了企业信息化、电商、SaaS 等典型应用场景。最后探讨了前后端分离、安全防护、性能优化等最佳实践，以及 WebAssembly、WebGPU 等技术带来的未来演进趋势，指出 B/S 架构正逐步成为数字世界的基础设施。
在当今高度互联的数字时代，Web 应用已成为企业运营、公共服务和日常生活的基础设施。无论是电商平台、在线办公系统，还是政府服务平台，其背后都依赖于一种核心的软件架构模式——（Browser/Server Architecture，浏览器/服务器架构）。
作为对传统 C/S 架构（Client/Server）的演进与优化，B/S 架构凭借其跨平台性、集中式维护、部署便捷性以及强大的可扩展能力，已成为现代 Web 应用开发的事实标准。
B/S 架构（Browser/Server Architecture）是一种基于 Web 的多层客户端 - 服务器软件架构模型。其核心思想是：
将用户界面、业务逻辑与数据存储进行分层解耦，用户通过标准 Web 浏览器访问系统，所有核心逻辑和数据处理集中在服务器端完成。
与传统的 C/S 架构不同，B/S 架构无需在用户设备上安装专用客户端程序，仅需一个支持 HTML、CSS 和 JavaScript 的现代浏览器即可运行应用。这种'零安装、即开即用'的特性，使其在互联网普及后迅速成为主流。
一个标准的 B/S 架构通常采用三层逻辑模型（Three-Tier Architecture），如下图所示：
+------------------+ +---------------------+ +------------------+
| 表示层 | | 业务逻辑层 | | 数据访问层 |
| (Presentation) | <---> | (Application Logic)| <---> | (Data Storage) |
| 浏览器 | HTTP | 应用服务器 | SQL | 数据库服务器 |
+------------------+ +---------------------+ +------------------+
注：在前后端分离架构中，此层不负责页面渲染，仅返回结构化数据（如 JSON）。
在生产环境中，通常在浏览器与应用服务器之间部署 Web 服务器（如 Nginx、Apache）作为反向代理，承担以下职责：
为更直观理解 B/S 架构的交互过程，我们以'用户登录'为例，结合文字描述与流程图进行说明。
https://example.com/login 并回车；/login；/static/login.css），直接返回；sequenceDiagram
participant User as 用户（浏览器）
participant Web as Web 服务器 (Nginx)
participant App as 应用服务器
participant DB as 数据库
User->>Web: GET /login
Web->>App: 转发请求
App->>User: 返回登录页面 (HTML/JSON)
User->>Web: POST /login (账号 + 密码)
Web->>App: 转发登录请求
App->>DB: 查询用户凭证
DB-->>App: 返回用户数据
alt 凭证有效
App->>App: 设置 Session / 返回 JWT
App-->>User: 重定向至 /dashboard
else 凭证无效
App-->>User: 返回错误信息
end
B/S 架构并非静态不变，而是随着 Web 技术的发展不断演进：
| 时期 | 架构特征 | 代表技术 | 用户体验 |
|---|---|---|---|
| 1990s（静态网页时代） | 页面内容完全静态，无交互 | HTML + CGI | 极简，仅信息展示 |
| 2000s（动态网页时代） | 服务器端动态生成 HTML | PHP、ASP、JSP、Servlet | 支持表单提交，但整页刷新 |
| 2005–2010（AJAX 时代） | 局部刷新，异步通信 | XMLHttpRequest, jQuery | 流畅度提升，减少等待 |
| 2010–2018（SPA 时代） | 前后端彻底分离，前端路由 | React, Vue, Angular | 接近原生应用体验 |
| 2018 至今（PWA + Wasm 时代） | 离线能力、高性能计算 | Service Worker, WebAssembly, WebGPU | 支持复杂应用（IDE、游戏、AI） |
如今，B/S 架构已能支撑如 VS Code Online、Figma Web、Zoom Web Client、Google Docs 等高度复杂的生产力工具，充分证明其能力边界正在快速扩展。
只需一个现代浏览器，即可在 PC、手机、平板、智能电视等设备上无缝使用，极大降低用户门槛。
所有业务逻辑和数据集中在服务器端，版本更新无需用户操作，运维成本显著低于 C/S 架构。
用户无需下载安装包，打开 URL 即可使用，有利于产品快速迭代与市场推广。
基于 W3C、IETF 等国际标准，拥有全球开发者社区、丰富工具链（Webpack、ESLint、Jest）和成熟框架。
尽管优势突出，B/S 架构仍面临若干固有挑战：
必须保持网络连接，离线功能受限。虽可通过 PWA（Progressive Web App） 实现部分离线能力（如缓存页面、后台同步），但复杂业务仍难完全离线运行。
面临典型 Web 攻击：
应对策略：强制 HTTPS、启用 CSP、参数化查询、CSRF Token、定期渗透测试、使用 OWASP 安全规范。
问题可能出现在前端、网络、后端、数据库任一环节，需依赖：
| 对比维度 | B/S 架构 | C/S 架构 |
|---|---|---|
| 客户端形式 | 通用 Web 浏览器 | 专用客户端程序（.exe / .dmg / .apk） |
| 安装部署 | 无需安装，URL 即用 | 需下载安装包，版本管理复杂 |
| 跨平台能力 | 极强（依赖浏览器兼容性） | 弱（需为 Windows/macOS/Linux/iOS/Android 分别开发） |
| 维护成本 | 低（服务器端集中更新） | 高（需推送更新至所有终端，存在版本碎片） |
| 性能表现 | 中等（受限于网络与 JS 引擎） | 高（可直接调用 OS API 与硬件资源） |
| 离线能力 | 有限（PWA 可缓存部分功能） | 强（可完全离线运行，数据本地存储） |
| 安全性 | 面临 Web 攻击，需多重防护 | 可控性强，但需防范逆向工程与本地提权 |
| 典型应用场景 | SaaS、电商、OA、政务系统 | 微信、Photoshop、AutoCAD、银行柜面系统、工业控制软件 |
选型建议：若面向广域网、多终端、频繁迭代的用户群体 → 优先选择 B/S 架构；若面向局域网、高性能、强交互、离线刚需的专业场景 → 考虑 C/S 架构 或 混合架构（如 Electron 应用）。
B/S 架构已广泛应用于以下领域：
为构建高质量、安全、可维护的 B/S 应用，推荐遵循以下工程实践：
随着 Web 标准的飞速发展，B/S 架构的能力正逼近甚至超越传统原生应用：
趋势判断：未来 5–10 年，绝大多数通用应用将运行在浏览器中，B/S 架构将成为数字世界的'操作系统'。
| 术语 | 说明 |
|---|---|
| SPA（Single Page Application） | 单页应用，页面切换不刷新，由前端路由控制 |
| SSR（Server-Side Rendering） | 服务器端渲染 HTML，提升 SEO 与首屏速度 |
| PWA（Progressive Web App） | 渐进式 Web 应用，具备离线、推送、安装等原生能力 |
| RESTful API | 基于 HTTP 方法（GET/POST/PUT/DELETE）的资源导向接口设计风格 |
| JWT（JSON Web Token） | 用于身份认证的紧凑、自包含令牌格式 |
| CSP（Content Security Policy） | 防止 XSS 的 HTTP 安全策略头 |
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online