原文地址

SPA 無處不在，但在網絡開發人員中仍然是一個頗有爭議的話題。

自 2003 年左右首次出現以來，單頁 Web 應用程序已經取得了長足的進步。它們已成為現代 javascript 領域不可或缺的一部分。

但是在我與不少開發人員的討論中，我覺得單頁應用程序的實際工作方式仍然不夠清晰。 因此，我決定卷起袖子（形象地說）并提供我對這個非常有趣的主題的看法。

所以，讓我們從頭開始。

what are single page applications?

在我看來，最好的定義是：單頁應用程序是一種 Web 應用程序，它只需要將單個頁面加載到瀏覽器中。

你可能會想，這到底是什么意思？ 一個只有單頁的應用程序怎么可能對世界上的任何人有用？

答案很簡單。 單頁 Web 應用程序是圍繞動態重寫該單頁內容的概念構建的。 這與從服務器加載預渲染頁面不同。

這就是魔法發生的地方。 通過采用這種方式，單頁面 Web 應用程序避免了由于在服務器上呈現頁面而導致的中斷。 這消除了 Web 開發世界在提供無縫用戶體驗方面通常面臨的最大問題。

單頁面應用的工作原理

在單頁 Web 應用程序中，當瀏覽器向服務器發出第一個請求時，服務器會發回 index.html 文件。基本上就是這樣。那是提供 html 文件的唯一時間。 html 文件有一個 .js 文件的腳本標記，它將控制 index.html 頁面。所有后續調用僅返回數據，通常為 json 格式。應用程序使用此 json 數據動態更新頁面。但是，頁面永遠不會重新加載。

一旦應用程序啟動，客戶端（而不是服務器）處理將數據轉換為 html 的工作。基本上，大多數現代 spa 框架都有一個在瀏覽器中運行的模板引擎來生成 html。

將此與傳統的 Web 應用程序形成對比。在傳統應用中，每次應用調用服務器時，服務器都會渲染整個html頁面。客戶端接收呈現的頁面并觸發頁面刷新。在這種情況下，瀏覽器是客戶端。

下圖解釋了兩種方法之間的區別：

單頁面應用的優勢

很明顯，由于我們不會為每個用戶交互通過網絡發送任何 html，因此可以節省大量時間和帶寬。由于各種開始和結束標簽，html 版本通常更大。此外，在傳統方法中，每次向服務器發出請求時，我們也會加載大量重復的 html。通過遵循 spa 方法，應用程序變得更加敏感。

無需猜測，更快的數據刷新和更少的帶寬消耗會帶來更好的用戶體驗。這在移動設備和較慢的互聯網連接上非常有用。

有一些反對單頁 Web 應用程序的論據說，javascript 包的大小可能會變得臃腫。然而，大多數優秀的 spa 框架都提供了很好的代碼拆分方法。這可以控制您的包大小并在適用的情況下執行按需加載。

一個不太明顯的好處是關于單頁面應用的整體架構。使用 json 發送應用程序數據在視圖層 (html) 和應用程序層之間創建了一種分離。這將表示層和應用層解耦，并允許開發人員獨立發展每一層。您可以在不更改應用程序邏輯的情況下替換 html 標記。客戶端和服務器也是完全獨立的。

另一個被忽視的好處是單頁應用程序的生產部署。單頁面應用非常容易部署。當您構建用于生產的 spa 時，您通常會得到一個 html 文件、一個 css 包和一個 javascript 包。任何靜態內容服務器都可以托管這些文件。很好的例子是 nginx、amazon s3 bucket、apache 或 firebase。

單頁面應用的缺點

單頁 Web 應用程序的最大缺點之一是它們無法被像谷歌這樣的搜索引擎正確索引。 由于除了初始 index.html 文件之外沒有 html 標記，搜索引擎無法索引內容，因為它們的爬蟲無法執行用于生成 html 的 javascript。

然而，在官方公告中，谷歌表示他們的搜索引擎現在能夠抓取 ajax 調用。

總結

以上是生活随笔為你收集整理的单页面 Web 应用(Single Page Application，SPA)的工作原理介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

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