單頁面應用的認識
一、定義
單頁 Web 應用 (single-page application 簡稱為 SPA) 是一種特殊的 Web 應用。它將所有的活動局限於一個Web頁面中，僅在該Web頁面初始化時加載相應的HTML、JavaScript 和 CSS。一旦頁面加載完成了，SPA不會因為用戶的操作而進行頁面的重新加載或跳轉。取而代之的是利用 JavaScript 動態的變換HTML的內容，從而實現UI與用戶的交互。由於避免了頁面的重新加載，SPA 可以提供較為流暢的用戶體驗。
二、優缺點
單頁Web程序的出現是富客戶端發展的必然結果，但是該技術也是有些局限性，所以采用之前需要了解清楚它的優缺點。
1、優點：
1).良好的交互體驗
用戶不需要重新刷新頁面，獲取數據也是通過Ajax異步獲取，頁面顯示流暢。
2).良好的前后端工作分離模式
單頁Web應用可以和RESTful規約一起使用，通過REST API提供接口數據，並使用Ajax異步獲取，這樣有助於分離客戶端和服務器端工作。更進一步，可以在客戶端也可以分解為靜態頁面和頁面交互兩個部分。
3).減輕服務器壓力
服務器只用出數據就可以，不用管展示邏輯和頁面合成，吞吐能力會提高幾倍；
4).共用一套后端程序代碼
不用修改后端程序代碼就可以同時用於Web界面、手機、平板等多種客戶端；
2、缺點：
1).SEO難度較高
由於所有的內容都在一個頁面中動態替換顯示，所以在SEO上其有着天然的弱勢，所以如果你的站點對SEO很看重，且要用單頁應用，那么就做些靜態頁面給搜索引擎用吧。
2).前進、后退管理
由於單頁Web應用在一個頁面中顯示所有的內容，所以不能使用瀏覽器的前進后退功能，所有的頁面切換需要自己建立堆棧管理，當然此問題也有解決方案，比如利用URI中的散列+iframe實現。
3).初次加載耗時多
為實現單頁Web應用功能及顯示效果，需要在加載頁面的時候將JavaScript、CSS統一加載，部分頁面可以在需要的時候加載。所以必須對JavaScript及CSS代碼進行合並壓縮處理，如果使用第三方庫，建議使用一些大公司的CDN，因此帶寬的消耗是必然的
二、單頁面應用實現的原理
1、基本實現原理：利用ajax請求替代了a標簽的默認跳轉，然后利用html5中的API修改了url，這項技術並沒有特別標准的學名，大家都稱呼為Pjax，意為PushState + Ajax。這並不完全准確，因為還有Hash + Ajax等方法
2、Pjax是一個優秀的解決方案，你有足夠多的理由來使用它：
- 可以在頁面切換間平滑過渡，增加Loading動畫。
- 可以在各個頁面間傳遞數據，不依賴URL。
- 可以選擇性的保留狀態，如音樂網站，切換頁面時不會停止播放歌曲。
- 所有的標簽都可以用來跳轉，不僅僅是a標簽。
- 避免了公共JS的反復執行，如無需在各個頁面打開時都判斷是否登錄過等等。
- 減少了請求體積，節省流量，加快頁面響應速度。
- 平滑降級到低版本瀏覽器上，對SEO也不會有影響。
3、深剖原理
- 攔截a標簽的默認跳轉動作。
2. 使用Ajax請求新頁面。
3. 將返回的Html替換到頁面中。
4. 使用HTML5的History API或者Url的Hash修改Url。
4、HTML5 History API
history.pushState(state, title, url)
pushState方法會將當前的url添加到歷史記錄中，然后修改當前url為新url。請注意，這個方法只會修改地址欄的Url顯示，但並不會發出任何請求。我們正是基於此特性來實現Pjax。它有3個參數：
- state: 可以放任意你想放的數據，它將附加到新url上，作為該頁面信息的一個補充。
- title: 顧名思義，就是document.title。不過這個參數目前並無作用，瀏覽器目前會選擇忽略它。
- url: 新url，也就是你要顯示在地址欄上的url。
history.replaceState(state, title, url)
replaceState方法與pushState大同小異，區別只在於pushState會將當前url添加到歷史記錄，之后再修改url，而replaceState只是修改url，不添加歷史記錄。
window.onpopstate 事件
一般來說，每當url變動時，popstate事件都會被觸發。但若是調用pushState來修改url，該事件則不會觸發，因此，我們可以把它用作瀏覽器的前進后退事件。該事件有一個參數，就是上文pushState方法的第一個參數state。