單頁面應用 概念 什麼是單頁應用呢？單頁應用的全稱是 single-page application，簡稱 SPA，它是一種網站應用的模型，它可以動態重寫當前的頁面來與用戶交互，而不需要重新載入整個頁面。單頁應用的流暢性讓 Web 應用更像桌面端或 Native 應用了。相對於傳統的 Web 應用， ...
單頁面應用
概念
什麼是單頁應用呢？單頁應用的全稱是 single-page application，簡稱 SPA，它是一種網站應用的模型，它可以動態重寫當前的頁面來與用戶交互，而不需要重新載入整個頁面。單頁應用的流暢性讓 Web 應用更像桌面端或 Native 應用了。相對於傳統的 Web 應用，單頁應用做到了前後端分離，後端只負責處理數據提供介面，頁面邏輯和頁面渲染都交給了前端。前端發展到現在，單頁應用的使用已經很廣泛，目前時興的 React、Vue、Angular 等前端框架均採用了 SPA 原則。單頁應用意味著前端掌握了主動權，也讓前端代碼更複雜和龐大，模塊化、組件化以及架構設計都變得越來越重要。
工作原理
SPA 的一個重要實現就是改變路由時，頁面不刷新。實現這個功能，通常有兩種方式：使用 window.history 對象或 location.hash。
history 對象
window.history 包含了瀏覽器的歷史信息，它有以下幾種常用方法：
history.back()：與在瀏覽器點擊後退按鈕相同；
history.forward()：與在瀏覽器中點擊按鈕向前相同；
history.go(n)：接受一個整數作為參數，移動到該整數指定的頁面，比如 go(1) 相當於 forward()，go(-1) 相當於 back()，go(0) 相當於刷新當前頁面。
HTML5 對 history 對象新增了 pushState() 和 replaceState() 方法，這兩個方法可以往歷史棧中添加數據，給用戶的感覺就是瀏覽器的 url 改變了，但是頁面並沒有重新載入。pushState() 是在瀏覽記錄中添加一個新記錄，replaceState() 則是修改當前的瀏覽器記錄，這是二者的細微差別，使用時參數的欄位和含義都是一樣的。
window.history.pushState(state, title, url)
state 是狀態對象，可以用 history.state 讀取；title 表示新頁面的標題，但是現在的所有瀏覽器都會忽略這個欄位，所以可以傳 null；url 是新頁面的地址，必須是和當前頁面在同一個域。當用戶點擊瀏覽器上的前進和後退按鈕時，或者調用上述 window.history 的 back、forward 和 go 方法，就會觸發 popstate 事件。該事件只針對同一個文檔，如果瀏覽歷史的切換導致載入了不同的文檔，popstate 事件將不會被觸發。popstate 事件回調函數的參數中的 state 屬性指向 pushState() 和 replaceState() 方法為當前頁面提供的狀態，也就是 pushState() 和 replaceState() 方法使用時傳的第一個參數 state。
hash
hash 是 location 對象的屬性，它指的是當前 url 的錨，也就是從 # 號開始的部分。修改 location.hash 並監聽 window 的 hashchange 事件，也能達到同樣的目的。
優缺點
SPA 可圈可點，現在已被大家廣泛使用，也得到了主流框架的支持，但是它也有局限性，我們將它的優缺點總結如下。
優點有：
無刷新體驗，用戶在切換頁面過程中不會頻繁被“打斷”，因為界面框架都在本地，對用戶的響應非常及時，因此提升了用戶體驗；
分離前後端關註點，前端負責界面顯示，後端負責數據存儲和計算，各司其職，不會把前後端的邏輯混雜在一起；
減輕伺服器壓力，伺服器只用出數據就可以，不用管展示邏輯和頁面合成，吞吐能力會提高幾倍；
API 共用，同一套後端程式代碼，不用修改就可以用於Web界面、手機、平板等多種客戶端；
完全的前端組件化，前端開發不再以頁面為單位，更多地採用組件化的思想，代碼結構和組織方式更加規範化，便於修改和調整。
缺點有：
對 SEO 不太優好，儘管可以通過 Prerender 預渲染優化等技術解決一部分，但是相對還是不容易索引到它；易出錯，需要使用程式管理前進、後退、地址欄等信息；
