單頁面應用（SinglePage Web Application，SPA）
只有一張Web頁面的應用，是一種從Web服務器加載的富客戶端，單頁面跳轉僅刷新局部資源 ，公共資源(js、css等)僅需加載一次，常用於PC端官網、購物等網站
如圖:
單頁面應用結構視圖
多頁面應用（MultiPage Application，MPA）
多頁面跳轉刷新所有資源，每個公共資源(js、css等)需選擇性重新加載，常用於 app 或 客戶端等
如圖：
多頁面應用結構視圖
具體對比分析：
| 單頁面應用（SinglePage Web Application，SPA） | 多頁面應用（MultiPage Application，MPA） | |
|---|---|---|
| 組成 | 一個外殼頁面和多個頁面片段組成 | 多個完整頁面構成 |
| 資源共用(css,js) | 共用，只需在外殼部分加載 | 不共用，每個頁面都需要加載 |
| 刷新方式 | 頁面局部刷新或更改 | 整頁刷新 |
| url 模式 | a.com/#/pageone a.com/#/pagetwo | a.com/pageone.html a.com/pagetwo.html |
| 用戶體驗 | 頁面片段間的切換快，用戶體驗良好 | 頁面切換加載緩慢，流暢度不夠，用戶體驗比較差 |
| 轉場動畫 | 容易實現 | 無法實現 |
| 數據傳遞 | 容易 | 依賴 url傳參、或者cookie 、localStorage等 |
| 搜索引擎優化(SEO) | 需要單獨方案、實現較爲困難、不利於SEO檢索 可利用服務器端渲染()優化 | 實現方法簡易 |
| 試用範圍 | 高要求的體驗度、追求界面流暢的應用 | 適用於追求高度支持搜索引擎的應用 |
| 開發成本 | 較高，常需藉助專業的框架 | 較低 ，但頁面重複代碼多 |
| 維護成本 | 相對容易 | 相對複雜 |