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