Web 应用(Web Application)可以按照架构模式、功能用途、交互方式、技术栈等多个维度进行分类。下面给你一个清晰、常用的分类体系:
一、按架构 / 技术模式分类
1️⃣ 静态 Web 应用(Static Web App)
由HTML、CSS、JS 组成
不依赖服务器端动态渲染
常部署在 CDN(如 GitHub Pages、Vercel)
示例:企业官网、文档站点、博客
✅ 优点:快、简单、成本低
❌ 缺点:交互和业务逻辑有限
2️⃣ 动态 Web 应用(Dynamic Web App)
页面内容由服务器动态生成
常见技术:JSP、ASP.NET、PHP、Thymeleaf
示例:早期门户网站、管理系统
✅ 优点:SEO 友好、简单直接
❌ 缺点:耦合高、交互体验一般
3️⃣ 单页应用(SPA,Single Page Application)
只加载一个 HTML 页面,后续通过 JS 动态更新
前端框架:React、Vue、Angular
示例:Gmail、Notion、钉钉 Web 版
✅ 优点:流畅、接近原生体验
❌ 缺点:首屏慢、SEO 需额外处理
4️⃣ 多页应用(MPA,Multi Page Application)
每次操作可能跳转新页面
传统 Web 应用典型形式
示例:电商网站、新闻站
✅ 优点:简单、SEO 好
❌ 缺点:交互不如 SPA 流畅
5️⃣ PWA(Progressive Web App,渐进式 Web 应用)
具有离线能力、可安装、推送通知
使用 Service Worker + Manifest
示例:Twitter Lite、星巴克 PWA
✅ 优点:接近原生 App 体验
❌ 缺点:兼容性、开发复杂度
6️⃣ SSR / SSG / ISR 应用(现代前端架构)
SSR(服务端渲染):Next.js、Nuxt
SSG(静态生成):构建时生成 HTML
ISR(增量静态再生)
✅ 优点:SEO + 性能兼顾
❌ 缺点:架构复杂
二、按功能 / 用途分类
类型 | 说明 | 示例 |
|---|---|---|
企业 Web 系统 | OA、ERP、CRM | 用友、钉钉管理后台 |
电商平台 | 商品、订单、支付 | 淘宝、京东 |
内容管理系统(CMS) | 内容发布与管理 | WordPress、Drupal |
社交 / 社区 | 用户互动 | 微博 Web、知乎 |
在线工具 | 实用功能 | 在线 PS、JSON 工具 |
教育 / LMS | 在线学习 | 慕课网、学堂在线 |
数据可视化平台 | 图表、大屏 | 监控平台、BI 系统 |
SaaS Web 应用 | 多租户服务 | Notion、Figma Web |
三、按前后端关系分类
1️⃣ 前后端不分离
后端渲染页面(JSP / Thymeleaf)
传统 Java / PHP 项目
2️⃣ 前后端分离
后端 = API(REST / GraphQL)
前端独立部署
当前主流方式
四、按访问方式
浏览器 Web 应用(最常见)
Web + 移动适配(响应式)
Web App 可被“添加到桌面”
内网 Web 应用(Intranet)
五、按用户规模与部署方式
个人 / 小型项目
企业内部系统
互联网级平台
私有化部署 Web 系统
云原生 Web 应用(K8s + 微服务)
总结(常用对照)
✅现代 Web 应用 ≈ 前后端分离 + SPA/PWA + API 后端 + 云部署