【前端詞典】一文讀懂單頁應用和多頁應用的區別

前言

最近看到一些人在問單頁面和多頁面應用的區別。由於最近在整理 Vue 相關的內容，因此也就輸出這一篇短文但願能夠給你一個總體的認識。

這裏也會大致介紹單頁應用實現的核心 —— 前端路由。

單頁應用 VS 多頁應用

直觀對比圖

單頁應用（ SinglePage Application，SPA ）

指只有一個主頁面的應用，一開始只需加載一次 js, css 等相關資源。全部的內容都包含在主頁面，對每個功能模塊組件化。單頁應用跳轉，就是切換相關組件，僅刷新局部資源。

多頁應用（ MultiPage Application，MPA ）

指有多個獨立的頁面的應用，每一個頁面必須重複加載 js, css 等相關資源。多頁應用跳轉，須要整頁資源刷新。

二者對比表格：

對比項 \ 模式	SPA	MPA
結構	一個主頁面 + 許多模塊的組件	許多完整的頁面
體驗	頁面切換快，體驗佳；當初次加載文件過多時，須要作相關的調優。	頁面切換慢，網速慢的時候，體驗尤爲很差
資源文件	組件公用的資源只須要加載一次	每一個頁面都要本身加載公用的資源
適用場景	對體驗度和流暢度有較高要求的應用，不利於 SEO（可藉助 SSR 優化 SEO）	適用於對 SEO 要求較高的應用
過渡動畫	Vue 提供了 transition 的封裝組件，容易實現	很難實現
內容更新	相關組件的切換，即局部更新	總體 HTML 的切換，費錢（重複 HTTP 請求）
路由模式	可使用 hash ，也可使用 history	普通連接跳轉
數據傳遞	由於單頁面，使用全局變量就好（Vuex）	cookie 、localStorage 等緩存方案，URL 參數，調用接口保存等
相關成本	前期開發成本較高，後期維護較爲容易	前期開發成本低，後期維護就比較麻煩，由於可能一個功能須要改不少地方

單頁應用實現 —— 前端路由

前端路由的核心：改變視圖的同時不會向後端發出請求。

這裏我講講 vue-router 路由的兩種模式：hash & history

hash 模式

hash 模式背後的原理是 onhashchange 事件。

window.addEventListener('hashchange',function(e) { 
    console.log(e.oldURL);  
    console.log(e.newURL) 
},false);
複製代碼

經過 window.location.hash 屬性獲取和設置 hash 值。

因爲 hash 發生變化的 url 都會被瀏覽器記錄下來，因此瀏覽器的前進後退可使用，儘管瀏覽器沒有請求服務器，可是頁面狀態和 url 關聯起來。後來人們稱其爲前端路由，成爲單頁應用標配。

hash 模式的特色在於 hash 出如今 url 中，可是不會被包括在 HTTP 請求中，對後端沒有影響，不會從新加載頁面。

history 模式

利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState()，它們提供了對歷史記錄進行修改的功能。

相關的 API:

history.pushState()

history.pushState(stateObj, title, url);
複製代碼

1. state：一個與指定網址相關的狀態對象，popstate 事件觸發時，該對象會傳入回調函數。若是不須要可填 null。
2. title：新頁面的標題，可是全部瀏覽器目前都忽略這個值，可填 null。
3. url：新的網址，必須與當前頁面處在同一個域。瀏覽器的地址欄將顯示這個網址。

例如：history.pushState('new', 'new', 'new.html');

添加上面這個新記錄後，瀏覽器地址欄馬上顯示 ~/new.html，但並不會跳轉到 new.html，它只是成爲 history 中的最新記錄。pushState 方法不會觸發頁面刷新，只是 history 對象變化，地址欄會變。

history.replaceState()

history.replaceState(stateObj, title, url);
複製代碼

參數同 pushState() 同樣。

調用該方法，會修改當前的 history 對象記錄，history.length 的長度不會改變

history.state

當前 URL 下對應的狀態信息。若是當前 URL 不是經過 pushState 或者 replaceState 產生的，那麼 history.state是 null。 當須要 state 和 URL 同步時可使用 replaceState() 使之同步。

popstate 事件

同一個文檔的 history 對象出現變化時，就會觸發 popstate 事件。

不一樣的瀏覽器在加載頁面時處理 popstate 事件的形式存在差別。頁面加載時 Chrome 和 Safari 一般會觸發 popstate 事件，但 Firefox 則不會。

注意：

調用 history.pushState() 或者 history.replaceState() 不會觸發 popstate 事件. popstate 事件只會在瀏覽器某些行爲下觸發, 好比點擊後退、前進按鈕(或者調用 history.back()、history.forward()、history.go()方法)。

Vue 相關文章輸出計劃

最近總有朋友問我 Vue 相關的問題，所以接下來我會輸出 10 篇 Vue 相關的文章，但願對你們有必定的幫助。我會保持在 7 到 10 天更新一篇。

1. Vuex 注入 Vue 生命週期的過程（完成）
2. 學習 Vue 源碼的必要知識儲備（完成）
3. 淺析 Vue 響應式原理（完成）
4. 新老 VNode 進行 patch 的過程
5. 如何開發功能組件並上傳 npm
6. 從這幾個方面優化你的 Vue 項目
7. 從 Vue-Router 設計講前端路由發展
8. 在項目中如何正確的使用 Webpack
9. Vue 服務端渲染
10. Axios 與 Fetch 該如何選擇

建議你關注個人公衆號，第一時間就能夠接收最新的文章。

若是你想加羣交流，能夠掃碼自動拉你入羣：