一：是什么
多頁面應用：一個項目是由多個完整的html頁面組成
單頁面應用：一個項目中只有一個完整的html頁面，其他的都是部分html片段組成。
二：渲染方式
多頁面：頁面跳轉，后台服務器返回一個新的html文檔，頁面跳轉所有資源都要重新加載
單頁面：頁面跳轉，局部刷新，不會重新加載全部資源。片段切換快，容易實現
二：問題：
多頁面：頁面跳轉切換，會出現卡頓空白問題，不容易實現切換動畫。切換慢
單頁面：首屏時間慢，SEO差；單頁應用的首屏時間慢，首屏時需要請求一次html，同時還要發送一次js請求，兩次請求回來了，首屏才會展示出來。相對於多頁應用，首屏時間慢。
SEO效果差，因為搜索引擎只認識html里的內容，不認識js的內容，而單頁應用的內容都是靠js渲染生成出來的，搜索引擎不識別這部分內容，也就不會給一個好的排名，會導致單頁應用做出來的網頁在百度和谷歌上的排名差。
三：特性：
多頁面：
（1）首屏時間快=》訪問頁面時，服務器只需要返回一個html，頁面就會展示出來，這個過程只經歷一盒HTTP請求，所以頁面展示速度快
（2）利於SEO=》SEO：根據網頁內容給網頁權重，搜索引擎可以識別html內容的，每個頁面所有內容都放在html中，所以排名效果好
單頁面：
（1）頁面切換快=》頁面每次切換跳轉時，並不需要做html文件的請求，這樣就節約了很多http發送時延，我們在切換頁面的時候速度很快。
四：單頁面解決seo
服務器端渲染技術(我是SSR)，通過這些技術可以完美解決這些缺點
單頁面VS多頁面
| mm |
多頁應用模式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或storage之類) |
| 搜索引擎優化（SEO） |
可以直接做 |
需要單獨方案做，有點麻煩 |
| 特別適用的范圍 |
需要對搜索引擎友好的網站 |
對體驗要求高的應用，特別是移動應用 |
| 搜索引擎優化（SEO） |
可以直接做 |
需要單獨方案做，有點麻煩 |
| 開發難度 |
低一些，框架選擇容易 |
高一些，需要專門的框架來降低這種模式的開發難度 |