SPA設計
1、設計意義
前後端分離
減輕伺服器壓力
增強使用者體驗
Prerender預渲染優化SEO
前後端分離：前端做業務邏輯，後端處理資料和介面，耦合度減少，開發效率提高。
減輕伺服器壓力:一個頁面不用每次都去請服務端，當一個應用較複雜，有10多個頁面的時候，那麼每個用使用者操作幾個頁面，只需要請求一次，這會在很大程度上減輕伺服器壓力。
增強使用者體驗:比如說當從一個首頁跳轉詳情頁，如果按照傳統頁面的方式，相當於在首頁請求，在去服務端請求另一個詳情頁，每一次的連線，都要消耗DNS以及TCP建立連線再加上頁面傳輸的過程還要包括介面響應的時間，這個都是使用者可以感受的到的，那麼當使用單頁面的時候，不存在多次下載頁面的時間，只有介面消耗的時間，這在很大程度上增強了使用者體驗。
缺點:SPA關於SEO方面有些弱勢，對於搜尋引擎不是特別友好，那怎麼彌補呢？
Prerender預渲染優化SEO:這個主要針對SPA在SEO弱勢方面上的處理,這篇文章主要介紹處理方法，大家可去了解一下。
2、工作原理
History API
Hash
SPA真正的工作原理是什麼？大家有可能在使用vue的話，基本都會使用Router外掛，用這個外掛頁面跑起來沒問題，但是這個外掛背後的工作原理是否清楚，有幾種方式實現？
實現方面的主要有兩大類History API和Hash實現，那麼這兩種之間有什麼區別呢？
第一個History API更加優雅，但是對瀏覽器是有一定要求的,第二個Hash看上去不是特別的優雅，但是它是相容性最好的方案。
2.1) History API
如上圖，左邊對應的入口一，二，三，對應頁面上的頁面一，二，三的，一個入口點進去，應該對應一個頁面，這個是入口的作用。那麼它們之間是怎麼關聯上的？比如我點選了入口二，怎麼讓頁面二開啟，記住這裡的頁面二開啟是不要請求服務端，是通過本地的JS控制，第是第一步。
第二個是點選瀏覽器的前進後退或者是其它控制，它怎麼回到某個入口對應的頁面上去，這是第二步。
以上二步就是SAP要控制的動作，如上圖中間部分 History物件，就是實現的一箇中間橋樑，History物件下的兩個小東西onpopstate和pushState，這是來實現這兩步的。
pushState：建立一個歷史記錄。
onpopstate：響應瀏覽器的前進和後退。
程式碼實現
說明:上圖主要有兩個a標籤，a.html,b.html，js註冊a標籤點選事件，通過history.pushState建立一個歷史記錄進行頁面切換，pushState主要有三個引數，第一個就是傳送引數，第二個是頁面的標題，第三個就是跳轉URL。
然後通過監聽onpopstate，就可以知道瀏覽器前進和回退一些資訊。
演示圖:
如上，當我點選a.hmtl位址列的就發生變化，頁面切到了a.html，但頁面不會重新整理，同理點選b.html效果也是一新。
當我們點選回退的時候，就會顯示具體資訊了。
2.2) Hash
其實hash與History流程差不多，不同的是，橋樑發生了變化。大家知道，一個URL上有post,path,search還有hash。那麼hash是怎麼做的呢？
當我們改變一個地址的時候，去修改hash，然後監聽hashchange事件，你就知道頁面的地址發生的變化，然後在這個事件裡面去做相應的動作，就能完成剛才所說的這種頁面的切換。
程式碼實現
演示圖:
結上就是SPA設計原理
願你成為終身學習者