WEB 客户端就是运行在用户本地设备上，用来访问 WEB 服务器的程序，最典型的就是我们日常使用的浏览器，它属于 B/S 架构里的客户端一侧，本身不存放完整业务数据和核心业务逻辑，主要负责接收服务器返回的页面代码和数据，把 HTML CSS JavaScript 渲染成可视化界面，同时采集用户点击输入等操作，再通过 HTTP 或者 HTTPS 协议把请求发送给远端 WEB 服务器，等待服务器处理之后返回新的内容，很多初学者容易把 WEB 客户端和普通桌面客户端混淆，普通桌面客户端是独立安装在电脑里，程序主体全部在本地运行，而 WEB 客户端依赖网络连接服务器，大部分业务计算放在服务器端，客户端只承担展示和交互的职责，随着技术发展，WEB 客户端也不再只是传统浏览器，现在的 PWA 应用 Electron 类应用，本质也属于扩展形态的 WEB 客户端，底层依旧沿用 WEB 技术栈。
WEB 客户端核心工作原理
WEB 客户端遵循请求响应模式，整个通信流程可以拆分成几个环节
1 用户在 WEB 客户端输入网址或者点击页面按钮
2 WEB 客户端根据 URL 解析目标服务器地址，建立网络连接
3 客户端构造 HTTP 请求，携带请求头参数 Cookie 等信息发送请求
4 WEB 服务器接收请求，执行业务逻辑查询数据库，生成响应数据
5 WEB 客户端接收响应内容，解析 HTML 执行 JS，渲染页面更新界面
6 用户继续操作，重复发起新的请求，现在单页应用 SPA 会使用 AJAX Fetch WebSocket 实现局部更新，不用每次刷新整个页面
WEB 客户端常见类型
| 类型 | 说明 | 代表产品 |
|---|---|---|
| 标准浏览器 WEB 客户端 | 最原始通用 WEB 客户端，跨平台，不需要单独开发专用程序 | Chrome Edge Firefox Safari |
| SPA 单页应用 WEB 客户端 | 页面首次加载后，后续交互通过接口请求局部更新，页面不会整页刷新 | Vue React 开发的后台管理系统 |
| PWA 渐进式 WEB 客户端 | 在浏览器基础上增加离线缓存桌面图标推送通知能力，接近桌面软件体验 | 支持 PWA 的在线文档系统 |
| 内嵌 WEB 客户端 | 把网页内核嵌入到第三方软件内部，软件里面内置 WEB 页面展示模块 | 部分企业 OA 软件内嵌网页模块 |
WEB 客户端主要功能模块
1 渲染引擎 负责解析 HTML 构建 DOM 树，解析 CSS 完成样式排版，绘制页面
2 JavaScript 引擎 执行页面脚本代码，处理事件定时器异步请求，实现交互逻辑
3 网络模块 处理 HTTP HTTPS 请求，缓存资源，管理 Cookie 本地存储
4 安全沙箱 隔离网页代码，限制网页访问本地文件系统，防止恶意脚本越权操作
5 存储模块 支持 localStorage sessionStorage IndexedDB，在 WEB 客户端本地保存少量临时数据
WEB 客户端和服务器端对比
WEB 客户端运行在用户侧，受用户设备性能浏览器版本影响，代码可以被用户查看，不需要管理员部署，用户打开就能使用
WEB 服务器运行在远端机房，负责核心业务运算数据库读写权限校验，需要运维维护，所有 WEB 客户端的请求最终都要交给服务器处理，二者配合才能完成完整 WEB 程序运行
WEB 客户端常见技术要点
跨域问题 因为浏览器同源安全策略，WEB 客户端请求不同域名接口会被拦截，需要 CORS 代理等方案解决
兼容性问题 不同 WEB 客户端也就是不同浏览器，对 JS 新特性 CSS 属性支持程度不一样，开发时需要做兼容处理
缓存机制 WEB 客户端会缓存静态图片脚本样式文件，合理设置缓存可以加快二次访问速度，但是也会出现更新之后页面还是旧版本的问题
离线能力 传统 WEB 客户端断网之后无法访问，PWA 通过 Service Worker 实现离线缓存，断网状态下仍然可以打开已经加载过的 WEB 页面
【常见问题】
问题 1 WEB 客户端是不是就等于浏览器
回答 1 浏览器是最典型最常用的 WEB 客户端，但 WEB 客户端范围更大，除了普通浏览器，SPA 应用 PWA 应用还有软件内嵌网页内核，都属于 WEB 客户端，不能把 WEB 客户端完全等同于浏览器。
问题 2 WEB 客户端能不能脱离服务器独立运行
回答 2 常规 WEB 客户端不能脱离服务器独立运行，核心业务数据和逻辑都保存在服务器，WEB 客户端只负责展示和交互，只有 PWA 这类 WEB 客户端可以依靠本地缓存，在断网时打开已经缓存的页面，但是新增业务操作依然需要联网连接服务器。
问题 3 WEB 客户端为什么会出现跨域报错
回答 3 跨域是 WEB 客户端自带的同源安全策略，WEB 客户端出于安全限制，默认不允许网页脚本跨域名跨端口请求其他服务器接口，这是 WEB 客户端内置安全机制，开发 WEB 项目时需要专门配置跨域解决方案。
问题 4 WEB 客户端和传统桌面客户端最大差别是什么
回答 4 WEB 客户端基于 WEB 技术，通过网络访问远端服务器，不需要单独安装完整业务程序，升级只需要更新服务器；传统桌面客户端程序主体在本地，业务运算大多本地完成，升级需要用户重新安装更新包，这就是 WEB 客户端和传统桌面客户端最核心差别。
【免责申明】
本文关于 WEB 客户端的概念原理仅作为技术学习参考，不同教材不同课程对 WEB 客户端定义表述会存在细微差异，相关技术标准会持续更新，本文不构成考试命题或者企业岗位考核的唯一标准答案，请结合课程大纲与实际项目理解 WEB 客户端相关知识。
