SPA單頁面應用和MPA多頁面應用（轉）

原文：https://www.jianshu.com/p/a02eb15d2d70

 

 

單頁面應用

第一次進入頁面時會請求一個html文件，刷新清除一下，切換到其餘組件，此時路徑也相應變化，可是並無新的html文件請求，頁面內容卻變化了。

原理： js會感知到url的變化，經過這一點能夠用js動態地將當前頁面的內容清除，而後將下一個頁面的內容掛載到當前頁面上。這個時候的路由再也不是後端來作了，而是前端來作，判斷頁面顯示相應的組件，清除不須要的。

頁面跳轉： js渲染
優勢： 頁面切換快
缺點： 首屏時間稍慢，SEO差

1. 爲何頁面切換快？

頁面每次切換跳轉時，並不須要處理html文件的請求，這樣就節約了不少HTTP發送時延，因此咱們在切換頁面的時候速度很快。

2. 爲何首屏時間慢，SEO 差？

單頁應用的首屏時間慢，首屏時須要請求一次html，同時還要發送一次js請求，兩次請求回來了，首屏纔會展現出來。相對於多頁面應用，首屏時間慢。

SEO效果差，由於搜索引擎只認識html裏的內容，不認識js渲染生成的內容，搜索引擎不識別，也就不會給一個好排名，會致使單頁應用作出來的網頁在搜索引擎上的排名差。

3. 爲何還要用 Vue 呢？

Vue官方提供了一些其餘的技術來解決這些缺點，好比服務端渲染技術（SSR），經過這些技術能夠完美解決這些缺點，這樣一來單頁面應用對於前端來講就是很是完美的頁面開發解決方案了。

---

多頁面應用

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

頁面跳轉： 返回HTML
優勢： 首屏時間快，SEO效果好
缺點： 頁面切換慢

1. 爲何多頁應用的首屏時間快？

首屏時間叫作頁面首個屏幕的內容展示的時間，當咱們訪問頁面的時候，服務器返回一個html，頁面就會展現出來，這個過程只經歷了一個HTTP請求，因此頁面展現的速度很是快。

2. 爲何搜索引擎優化效果好（SEO）？

搜索引擎在作網頁排名的時候，要根據網頁的內容才能給網頁權重，來進行網頁的排名。搜索引擎是能夠識別html內容的，而咱們每一個頁面全部的內容都放在html中，因此這種多頁應用SEO排名效果好。

3. 缺點：切換慢

每次跳轉都須要發送一個HTTP請求，若是網絡狀態很差，在頁面間來回跳轉時，就會發生明顯的卡頓，影響用戶體驗。

---

總結

/	多頁面應用模式MPA	單頁面應用模式SPA
應用構成	由多個完整頁面構成	一個外殼頁面和多個頁面片斷構成
跳轉方式	頁面之間的跳轉是從一個頁面到另外一個頁面	一個頁面片斷刪除或隱藏，加載另外一個頁面片斷並顯示。片斷間的模擬跳轉，沒有開殼頁面
跳轉後公共資源是否從新加載	是	否
URL模式	http://xxx/page1.html和http://xxx/page2.html	http://xxx/shell.html#page1和http://xxx/shell.html#page2
用戶體驗	頁面間切換加載慢，不流暢，用戶體驗差，尤爲在移動端	頁面片斷間切換快，用戶體驗好，包括移動設備
可否實現轉場動畫	否	容易實現（手機APP動效）
頁面間傳遞數據	依賴URL、cookie或者localstorage，實現麻煩	頁面傳遞數據容易（Vuex或Vue中的父子組件通信props對象）
搜索引擎優化（SEO）	能夠直接作	須要單獨方案（SSR）
特別適用的範圍	須要對搜索引擎友好的網站	對體驗要求高，特別是移動應用
開發難度	較低，框架選擇容易	較高，須要專門的框架來下降這種模式的開發難度