單頁面應用 與 多頁面應用

2021-09-11 23:35:48 字數 668 閱讀 2904

單頁面應用結構檢視如下:

多頁面應用結構檢視如下:

具體對比分析:

單頁面應用

多頁面應用

組成乙個外殼頁面和多個頁面片段組成

多個完整頁面構成

資源(css,js)

共用,只需在外殼部分載入

不共用,每個頁面都需要載入

重新整理方式

頁面區域性重新整理或更改

整頁重新整理

url格式

使用者體驗

頁面片段間的切換快,使用者體驗良好

頁面切換載入緩慢,流暢度不夠,使用者體驗比較差

轉場動畫

容易實現

無法實現

資料傳遞

容易依賴 url傳參、或者cookie 、localstorage等

搜尋引擎優化(seo)

需要單獨方案、實現較為困難、不利於seo檢索 可利用伺服器端渲染(ssr)優化

實現方法簡易

試用範圍

高要求的體驗度、追求介面流暢的應用

適用於追求高度支援搜尋引擎的應用

開發成本

較高,常需借助專業的框架

較低 ,但頁面重複**多

維護成本

相對容易

相對複雜

多頁面應用和單頁面應用

每次頁面跳轉,後端都會返回乙個新的html檔案。優點 首屏時間快,seo效果好 缺點 頁面切換慢 後端路由切換頁面 每次跳轉頁面都要發乙個http請求。只在首次載入時請求乙個html檔案,頁面切換的路由由前端完成,使用js動態地刪除和渲染頁面。優點 頁面切換快 由前端路由切換頁面 缺點 首屏時間稍慢...

多頁面應用 VS 單頁面應用

每一次頁面跳轉,後端都會返回乙個新的html檔案,優點 首屏時間快 只經歷了乙個http請求 seo效果好 缺點 頁面切換慢 進行頁面之間跳轉時,並不去載入html檔案,而是通過js動態地把當前的內容刪除掉,再去把新的頁面結構上的dom元素渲染出來。當頁面做跳轉時,不需要做html檔案的請求,節約了...

單頁面應用與多頁面應用之間的比較

是用js渲染,每次頁面間的跳轉都是都通js把之前的頁面內容刪掉後,加上新的內容,這樣避免了每次跳轉去傳送http請求,整個過程就只傳送了乙個http請求,頁面製作區域性重新整理或者更改,這樣切換頁面速度更快,缺點就是相對於多頁面應用來說,seo效果更差,首屏時間更長。vue會提供伺服器渲染方面的技術...