該文章寫的很清晰，讓人很快的分別出其中差異
只有一張web頁面的應用，是一種從web伺服器載入的富客戶端，單頁面跳轉僅重新整理區域性資源 ，公共資源(js、css等)僅需載入一次，常用於pc端官網、購物等**
如圖:單頁面應用結構檢視
如圖：多頁面應用結構檢視
具體對比分析：
組成乙個外殼頁面和多個頁面片段組成
多個完整頁面構成
資源共用(css,js)
共用，只需在外殼部分載入
不共用，每個頁面都需要載入
重新整理方式
頁面區域性重新整理或更改
整頁重新整理
url 模式
使用者體驗
頁面片段間的切換快，使用者體驗良好
頁面切換載入緩慢，流暢度不夠，使用者體驗比較差
轉場動畫
容易實現
無法實現
資料傳遞
容易依賴 url傳參、或者cookie 、localstorage等
搜尋引擎優化(seo)
需要單獨方案、實現較為困難、不利於seo檢索 可利用伺服器端渲染(ssr)優化
實現方法簡易
試用範圍
高要求的體驗度、追求介面流暢的應用
適用於追求高度支援搜尋引擎的應用
開發成本
較高，常需借助專業的框架
較低 ，但頁面重複**多
維護成本
相對容易
相對複雜
系統設計 單頁面和多頁面應用區分
只有一張web頁面的應用，是一種從web伺服器載入的富客戶端，單頁面跳轉僅重新整理區域性資源 公共資源 js css等 僅需載入一次，常用於pc端官網 購物等 如圖 如圖 具體對比分析 組成乙個外殼頁面和多個頁面片段組成 多個完整頁面構成 資源共用 css,js 共用，只需在外殼部分載入 不共用，每...
多頁面應用和單頁面應用
每次頁面跳轉，後端都會返回乙個新的html檔案。優點 首屏時間快，seo效果好 缺點 頁面切換慢 後端路由切換頁面 每次跳轉頁面都要發乙個http請求。只在首次載入時請求乙個html檔案，頁面切換的路由由前端完成，使用js動態地刪除和渲染頁面。優點 頁面切換快 由前端路由切換頁面 缺點 首屏時間稍慢...
前端 你要懂的單頁面應用和多頁面應用
只有一張web頁面的應用，是一種從web伺服器載入的富客戶端，單頁面跳轉僅重新整理區域性資源 公共資源 js css等 僅需載入一次，常用於pc端官網 購物等 如圖 單頁面應用結構檢視 如圖 多頁面應用結構檢視 具體對比分析 組成乙個外殼頁面和多個頁面片段組成 多個完整頁面構成 資源共用 css,j...