前端學習之路之SPA(單頁應用)設計原理

SPA設計

一、設計意義

• 先後端分離

• 減輕服務器壓力

• 加強用戶體驗

• Prerender預渲染優化SEO

先後端分離：前端作業務邏輯，後端處理數據和接口，耦合度減小，開發效率提升。

減輕服務器壓力:一個頁面不用每次都去請服務端，當一個應用較複雜，有10多個頁面的時候，那麼每一個用用戶操做幾個頁面，只須要請求一次，這會在很大程度上減輕服務器壓力。

加強用戶體驗:好比說當從一個首頁跳轉詳情頁，若是按照傳統頁面的方式，至關於在首頁請求，在去服務端請求另外一個詳情頁，每一次的鏈接，都要消耗DNS以及TCP創建鏈接再加上頁面傳輸的過程還要包括接口響應的時間，這個都是用戶能夠感覺的到的，那麼當使用單頁面的時候，不存在屢次下載頁面的時間，只有接口消耗的時間，這在很大程度上加強了用戶體驗。

缺點:SPA關於SEO方面有些弱勢，對於搜索引擎不是特別友好，那怎麼彌補呢？

Prerender預渲染優化SEO:這個主要針對SPA在SEO弱勢方面上的處理,這篇文章主要介紹處理方法，你們可去了解一下。

二、工做原理

• 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設計原理

願你成爲終身學習者