在早期的 Web 應用中，前端的作用很弱，業務邏輯和數據處理都在后端，后端給前端返回一個 HTML 頁面，前端只負責展示。在這種模式下，單個 HTML 頁面被當做一個功能原件，表單提交，超鏈接跳轉都可以用來重新請求新的 HTML 頁面，從而達到給用戶展示新的頁面的目的。在這種方式中，你可以感覺到頁面總是在不停的刷新，一個點擊可能都需要等待很久，這是因為，當頁面變化時，所有資源都需要重新請求。這些問題導致了用戶體驗不佳，也浪費了資源。單頁應用便很好的解決了這些問題。

?

1、概念

什么是單頁應用呢？單頁應用的全稱是 single-page application，簡稱 SPA，它是一種網站應用的模型，它可以動態重寫當前的頁面來與用戶交互，而不需要重新加載整個頁面。單頁應用的流暢性讓 Web 應用更像桌面端或 Native 應用了。相對于傳統的 Web 應用，單頁應用做到了前后端分離，后端只負責處理數據提供接口，頁面邏輯和頁面渲染都交給了前端。前端發展到現在，單頁應用的使用已經很廣泛，目前時興的 React、Vue、Angular 等前端框架均采用了 SPA 原則。單頁應用意味著前端掌握了主動權，也讓前端代碼更復雜和龐大，模塊化、組件化以及架構設計都變得越來越重要

?

2、工作原理

SPA 的一個重要實現就是改變路由時，頁面不刷新。實現這個功能，通常有兩種方式：使用 window.history 對象或 location.hash。

?

2.1 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() 則是修改當前的瀏覽器記錄，這是二者的細微差別，使用時參數的字段和含義都是一樣的。

?

2.2 hash

hash 是 location 對象的屬性，它指的是當前 url 的錨，也就是從 # 號開始的部分。修改 location.hash 并監聽 window 的 hashchange 事件，也能達到同樣的目的。

　　　　

3、優缺點

SPA 可圈可點，現在已被大家廣泛使用，也得到了主流框架的支持，但是它也有局限性，我們將它的優缺點總結如下。

優點：

無刷新體驗，用戶在切換頁面過程中不會頻繁被“打斷”，因為界面框架都在本地，對用戶的響應非常及時，因此提升了用戶體驗；

分離前后端關注點，前端負責界面顯示，后端負責數據存儲和計算，各司其職，不會把前后端的邏輯混雜在一起；

減輕服務器壓力，服務器只用出數據就可以，不用管展示邏輯和頁面合成，吞吐能力會提高幾倍；

API 共享，同一套后端程序代碼，不用修改就可以用于Web界面、手機、平板等多種客戶端；

完全的前端組件化，前端開發不再以頁面為單位，更多地采用組件化的思想，代碼結構和組織方式更加規范化，便于修改和調整。

?

缺點：

對 SEO 不太優好，盡管可以通過 Prerender 預渲染優化等技術解決一部分，但是相對還是不容易索引到它；

易出錯，需要使用程序管理前進、后退、地址欄等信息；

較高的前端開發門檻，對技術能力要求較高，需要對設計模式有一定理解，因為面對不是一個簡單的頁面，而是一個運行在瀏覽器環境里面的桌面軟件。

?

小結

在本節中，我們簡單理解了 SPA 以及 SPA 在路由層面的實現，需要掌握：

• 理解 SPA 是什么；

• SPA 路由的工作原理；

• 了解 SPA 的優缺點

?

另，SPA最重要的兩個注意點：

頁面不用刷新

路由的跳轉

?

還有一篇帖子：

SPA（單頁面應用）的基本實現原理

總結

以上是生活随笔為你收集整理的什么是单页应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。