【Vue.js】SPA

SPA

---

2019-11-13  23:20:48  by沖沖

 

一、概念

（1）MPA（multi-page application）

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

（2）SPA（single-page application）

① 原理：第一次進入頁面時就會加載相應的HTML、JavaScript 和 CSS，須要切換內容時，經過JavaScript感知url變化，更換當前頁面內容，可是並無新的html文件請求。此時路由再也不是後端作，而是前端作。

② 頁面跳轉：js渲染

③ 優勢：

A. 頁面切換快。前端局部渲染。

B. 減輕服務器壓力。服務器前期發送靜態資源（html、css、js）到瀏覽器，日後經過RESTful API提供接口數據，並使用Ajax異步獲取，實現先後端分離。

C. 不用修改後端程序代碼（API接口）就能夠同時用於web界面、手機、平板等多種客戶端。

④ 缺點：

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

B. SEO差。由於搜索引擎只認識html裏的內容，不認識js渲染生成的內容，搜索引擎不識別，也就不會給一個好排名，會致使單頁應用作出來的網頁在搜索引擎上的排名差。（解決方案：vue的SSR）

 

二、比較

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