單頁面 Web 應用(Single Page Application，SPA)的工作原理介紹

原文位址

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 調用。