多頁應用

每一次頁面跳轉的時候，后臺服務器都會給返回一個新的html文檔，這種類型的網站也就是多頁網站，也叫做多頁應用。

為什么多頁應用的首屏時間快？

首屏時間叫做頁面首個屏幕的內容展現的時間，當我們訪問頁面的時候，服務器返回一個html，頁面就會展示出來，這個過程只經歷了一個HTTP請求，所以頁面展示的速度非常快。

為什么搜索引擎優化效果好（SEO）？

搜索引擎在做網頁排名的時候，要根據網頁內容才能給網頁權重，來進行網頁的排名。搜索引擎是可以識別html內容的，而我們每個頁面所有的內容都放在Html中，所以這種多頁應用，seo排名效果好。

但是它也有缺點，就是切換慢

因為每次跳轉都需要發出一個http請求，如果網絡比較慢，在頁面之間來回跳轉時，就會發現明顯的卡頓。

單頁應用

第一次進入頁面的時候會請求一個html文件，刷新清除一下。切換到其他組件，此時路徑也相應變化，但是并沒有新的html文件請求，頁面內容也變化了。原理是：JS會感知到url的變化，通過這一點，可以用js動態的將當前頁面的內容清除掉，然后將下一個頁面的內容掛載到當前頁面上，這個時候的路由不是后端來做了，而是前端來做，判斷頁面到底是顯示哪個組件，清除不需要的，顯示需要的組件。這種過程就是單頁應用，每次跳轉的時候不需要再請求html文件了。

為什么頁面切換快？

頁面每次切換跳轉時，并不需要做html文件的請求，這樣就節約了很多http發送時延，我們在切換頁面的時候速度很快。

缺點：首屏時間慢，SEO差

單頁應用的首屏時間慢，首屏時需要請求一次html，同時還要發送一次js請求，兩次請求回來了，首屏才會展示出來。相對于多頁應用，首屏時間慢。SEO效果差，因為搜索引擎只認識html里的內容，不認識js的內容，而單頁應用的內容都是靠js渲染生成出來的，搜索引擎不識別這部分內容，也就不會給一個好的排名，會導致單頁應用做出來的網頁在百度和谷歌上的排名差。

有這些缺點，為什么還要使用Vue呢？

Vue還提供了一些其它的技術來解決這些缺點，比如說服務器端渲染技術(我是SSR)，通過這些技術可以完美解決這些缺點，解決完這些問題，實際上單頁面應用對于前端來說是非常完美的頁面開發解決方案。

新的更新

最近在改造公司的項目，公司的項目是單頁應用，可能會改成多頁應用，所以對這塊又重新看了一下。在網上看到一個表格覺得總結的很到位，貼過來。我是表格出處

mm 多頁應用模式MPA 單頁應用模式SPA 應用構成 由多個完整頁面構成 一個外殼頁面和多個頁面片段構成 跳轉方式 頁面之間的跳轉是從一個頁面跳轉到另一個頁面 頁面片段之間的跳轉是把一個頁面片段刪除或隱藏，加載另一個頁面片段并顯示出來。這是片段之間的模擬跳轉，并沒有開殼頁面 跳轉后公共資源是否重新加載 是 否 URL模式

http://xxx/page1.html

http://xxx/page1.html

http://xxx/shell.html#page1

http://xxx/shell.html#page2

用戶體驗 頁面間切換加載慢，不流暢，用戶體驗差，特別是在移動設備上 頁面片段間的切換快，用戶體驗好，包括在移動設備上 能否實現轉場動畫 無法實現 容易實現（手機app動效） 頁面間傳遞數據 依賴URL、cookie或者localstorage，實現麻煩 因為在一個頁面內，頁面間傳遞數據很容易實現 搜索引擎優化（SEO） 可以直接做 需要單獨方案做，有點麻煩 特別適用的范圍 需要對搜索引擎友好的網站 對體驗要求高的應用，特別是移動應用 搜索引擎優化（SEO） 可以直接做 需要單獨方案做，有點麻煩 開發難度 低一些，框架選擇容易 高一些，需要專門的框架來降低這種模式的開發難度

以上就是vue 單頁應用和多頁應用的優劣的詳細內容，更多關于vue 單頁應用和多頁應用的資料請關注好吧啦網其它相關文章！