單頁Web應用（single page web application，SPA）： SPA 是一種特殊的 Web 應用，是加載單個 HTML 頁面並在用戶與應用程序交互時動態更新該頁面的。它將所有的活動局限於一個 Web 頁面中，僅在該 Web 頁面初始化時加載相應的 HTML 、 JavaScript 、 CSS 。一旦頁面加載完成， SPA 不會因為用戶的操作而進行頁面的重新加載或跳轉，而是利用 JavaScript 動態的變換 HTML（采用的是 div 切換顯示和隱藏），從而實現UI與用戶的交互。在 SPA 應用中，應用加載之后就不會再有整頁刷新。相反，展示邏輯預先加載，並依賴於內容Region（區域）中的視圖切換來展示內容。
要實現單頁面應用，現在已經有很多現成的框架了，它們都是很全面的開發平台，為單頁面應用開發提供了必需的頁面模板、路徑解析和處理、后台服務 api 訪問、 DOM 操作等功能。
1. 優點
1) 有良好的交互體驗
能提升頁面切換體驗，用戶在訪問應用頁面是不會頻繁的去切換瀏覽頁面，從而避免了頁面的重新加載；
2) 前后端分離開發
單頁Web應用可以和 RESTful 規約一起使用，通過 REST API 提供接口數據，並使用 Ajax 異步獲取，這樣有助於分離客戶端和服務器端工作。更進一步，可以在客戶端也可以分解為靜態頁面和頁面交互兩個部分；
3) 減輕服務器壓力
服務器只用出數據就可以，不用管展示邏輯和頁面合成，吞吐能力會提高幾倍；
4) 共用一套后端程序代碼
不用修改后端程序代碼就可以同時用於 Web 界面、手機、平板等多種客戶端；
2. 缺點：
1) SEO難度較高
由於所有的內容都在一個頁面中動態替換顯示，所以在SEO上其有着天然的弱勢，所以如果你的站點對SEO很看重，且要用單頁應用，那么就做些靜態頁面給搜索引擎用吧；
2) 前進、后退管理
由於單頁Web應用在一個頁面中顯示所有的內容，所以不能使用瀏覽器的前進后退功能，所有的頁面切換需要自己建立堆棧管理，當然此問題也有解決方案，比如利用URI中的散列+iframe實現；
3) 初次加載耗時多
為實現單頁Web應用功能及顯示效果，需要在加載頁面的時候將JavaScript、CSS統一加載，部分頁面可以在需要的時候加載。所以必須對JavaScript及CSS代碼進行合並壓縮處理；
3. 性能優化
1) 加載優化
在SPA中，通常一開始就會加載所有必需的代碼（HTML，JavaScript和CSS），有時候考慮到首屏加載太慢會按需加載，按需加載就是按照當前呈現的不同頁面加載不同的文件，而不是最開始就把所有文件都加載出來，從而避免首屏加載很慢。
當首屏加載完畢后，設備&網絡處於空閑狀態，可以對其他路由組件進行預加載，以便提升頁面切換性能。
根據路由拆分減少初始加載體積,利用異步加載方式，在路由注冊時提供異步拉取組件的方法，僅在需要進入對應路由時，對應組件才會被加載進來。
- 初次加載的速度
單頁應用的第一頁加載會比基於服務器的應用慢。這是因為首次加載必須先拿到框架和應用程序的代碼，再在瀏覽器中呈現所需的視圖。基於服務器的應用程序只需將所需的HTML推送到瀏覽器，從而減少了延遲和下載用時。
- 加快頁面加載速度
有一些方法可以加快單頁應用的初次加載速度，比如采用多項緩存措施、需要時再加載某些模塊（懶加載）。
- 頁面生命周期
單頁應用在初始頁面加載時被完全加載，然后頁面區域被替換或更新為按需從服務器加載的新頁面片段。為避免過度下載未使用的功能，單頁應用通常會逐漸下載更多內容，如所需要的功能、頁面的一小塊，或者完整的一頁。
2) SEO優化
由於我們在處理單頁應用的時候頁面是不刷新的，所以會導致我們的網頁記錄和內容很難被搜索引擎抓取到。搜索引擎抓取頁面首先要遵循http協議，可是#不是協議內的內容。而實際上也是這樣，我們沒有見過搜索引擎的搜索結果中，哪一條記錄可以快速定位到網頁內的某個位置的。解決的方法是用 #!號代替#號，因為谷歌會抓取帶有#!的URL。（Google規定，如果你希望Ajax生成的內容被瀏覽引擎讀取，那么URL中可以使用"#!"(這種URL在一般頁面一般不會產生定位效果)），這樣我們可以解決ajax的不被搜索引擎抓取的問題。在vueJs里面，我們可以看到作者就是這樣做的。
3) 前進后退功能優化
配置好路由信息，通過記錄瀏覽過的歷史路由信息，可以很好的記錄或歷史查看過的界面，也可以獨立寫個足跡功能實現。
4. 體驗優化
1) 構建骨架圖
SPA 首屏加載面臨較長時間白屏，骨架圖是一個完美的”緩兵之計”，相當於加載到下個界面時先把下個頁面的雛形加載出來，再加載其余的組件，做到緩沖作用，骨架圖對用戶體驗有極大的提升：
- 快速展示
配合 PWA 首屏緩存，骨架圖可實現瞬間加載&展示，首屏視覺上有沖擊性地提升；
- 穩定加載
消除頁面初始加載因多次重繪&資源加載導致的”抖動”需要注意的是，骨架圖應盡量保持足夠小巧與簡單，以確保不會嚴重影響頁面后續加載；
2) 頁面切換
無論如何優化性能加載，在頁面切換時候依舊需要獲取頁面數據，若處理不好，可能會在數據返回前有短暫的不友好”空白”。通過以下方式可以很好處理這個問題：
- 切換前：
在確保組件&數據加載完畢前，可保證頁面可交互性，減少用戶阻塞感；
- 轉場動畫：
在大多數原生應用，轉場動畫屬於標配，即時組件&數據已經完全加載，在切換至新頁面瞬間，依舊需要頁面渲染時間，這段時間可能導致頁面短暫空白或者”視覺阻塞”，通過轉場動畫時間，可以很好地緩解這個問題，大多數頁面保證在轉場動畫完畢之后依然渲染完畢。