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