單頁面應用和多頁面應用對比分析

單頁面應用（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檢索 可利用服務器端渲染(SSR)優化	實現方法簡易
試用範圍	高要求的體驗度、追求界面流暢的應用	適用於追求高度支持搜索引擎的應用
開發成本	較高，常需藉助專業的框架	較低 ，但頁面重複代碼多
維護成本	相對容易	相對複雜

做者：hilpeter
連接：https://juejin.im/post/5a0ea4ec6fb9a0450407725c