[原文地址](https://dzone.com/articles/how-single-page-web-applications-actually-work)

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頁面。客戶端接收呈現的頁面並觸發頁面重新整理。在這種情況下，瀏覽器是客戶端。

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

![](https://img-blog.csdnimg.cn/img_convert/03b2bfcee4aa09f6074ca31552820161.png)

# 單頁面應用的優勢

很明顯，由於我們不會為每個使用者互動透過網路傳送任何 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)的工作原理介紹

相關文章