Appearance
单页应用
元信息
- 目标：理解 SPA"一个空壳页面 + 客户端动态生成全部页面"的形态，能从切换体验、首屏、SEO、前后端分工等维度与 MPA 比较取舍，判断自己的应用该选哪种
- 关键概念：SPA、MPA、前端路由、客户端渲染、首屏、SEO
- 关联阶段：cp3
- 常见误区：以为 SPA 切换快是因为网络更快（实为客户端渲染免去了整页刷新）；以为 SPA 全面优于 MPA（内容型站点首屏与 SEO 吃亏）；以为 SPA 只能有一个（可按功能拆成两三个小 SPA 折中）
单页应用
对于采用前端路由技术的应用来说，通常只有一个主页面 index.html，该页面负责加载所有前端路由信息及js代码等，而其它所有页面实际上都是由客户端动态生成，故称之为单页应用 SPA
单页应用 Vs. 多页应用
多页应用 MPA（Multi-Page Application）是Web的传统形态：每个"页面"对应一个真实的html文档，页面间的跳转即浏览器向服务端发起新请求、整页重新加载。两者的根本区别在于页面切换发生在哪一端：
对照比较：
| 维度 | 多页应用 MPA | 单页应用 SPA |
|---|---|---|
| 页面构成 | N个业务页面 = N个html文档 | 1个html空壳 + 客户端动态生成 |
| 页面切换 | 发起新请求，整页刷新 | 前端路由拦截，客户端渲染 |
| 切换体验 | 白屏等待，状态丢失（如滚动位置、表单内容） | 即时切换，可做转场动画，应用状态可保持 |
| 首屏渲染 | 快：服务端直接返回可用内容 | 慢：需下载全部js并执行后才有内容 |
| 前后端分工 | 耦合：服务端负责渲染（php/jsp等模板） | 分离：后端只提供restful数据接口，前端负责一切呈现 |
| 数据传输 | 每次切换都传输整页html，冗余大 | 仅传输变化的JSON数据，开销小 |
| SEO | 好：爬虫直接读到内容 | 差：爬虫一般不执行js，只抓到空壳 |
| 开发体验 | 每页重复引入模板与脚本 | 前端路由+组件化+客户端状态，更接近应用开发 |
- SPA 切换迅速、体验好：因为新页面在客户端生成，无需网络请求和整页刷新
- SPA 首屏渲染慢：因为首屏既需网络请求加载html及全部js资源，还需执行js脚本动态生成页面，首屏延迟较长（可用代码分割、预渲染等手段缓解，归第 13 周）
- SPA 的 SEO 差：爬虫一般不执行js，抓取到的往往只是空壳（现代爬虫有所改善，且可用服务端渲染 SSR 弥补，超出本周范围）
多页应用的特点正好反之。并且，上述多页应用指由服务端渲染完全主导的传统形态；实际上也可以按功能的相关性把应用划分为两三个较小的单页应用（如前台一个、后台一个），在首屏速度与切换体验之间取得平衡。
一句话判断
你的应用更像内容（以阅读为主、页面即文档、依赖搜索流量）→ 多页占优；更像工具（高频交互、登录后使用、状态密集，如邮箱、后台管理、编辑器）→ 单页占优。