原文地址

SPA 無(wú)處不在，但在網(wǎng)絡(luò)開發(fā)人員中仍然是一個(gè)頗有爭(zhēng)議的話題。

自 2003 年左右首次出現(xiàn)以來(lái)，單頁(yè) Web 應(yīng)用程序已經(jīng)取得了長(zhǎng)足的進(jìn)步。它們已成為現(xiàn)代 javascript 領(lǐng)域不可或缺的一部分。

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

所以，讓我們從頭開始。

what are single page applications?

在我看來(lái)，最好的定義是：單頁(yè)應(yīng)用程序是一種 Web 應(yīng)用程序，它只需要將單個(gè)頁(yè)面加載到瀏覽器中。

你可能會(huì)想，這到底是什么意思？ 一個(gè)只有單頁(yè)的應(yīng)用程序怎么可能對(duì)世界上的任何人有用？

答案很簡(jiǎn)單。 單頁(yè) Web 應(yīng)用程序是圍繞動(dòng)態(tài)重寫該單頁(yè)內(nèi)容的概念構(gòu)建的。 這與從服務(wù)器加載預(yù)渲染頁(yè)面不同。

這就是魔法發(fā)生的地方。 通過(guò)采用這種方式，單頁(yè)面 Web 應(yīng)用程序避免了由于在服務(wù)器上呈現(xiàn)頁(yè)面而導(dǎo)致的中斷。 這消除了 Web 開發(fā)世界在提供無(wú)縫用戶體驗(yàn)方面通常面臨的最大問(wèn)題。

單頁(yè)面應(yīng)用的工作原理

在單頁(yè) Web 應(yīng)用程序中，當(dāng)瀏覽器向服務(wù)器發(fā)出第一個(gè)請(qǐng)求時(shí)，服務(wù)器會(huì)發(fā)回 index.html 文件。基本上就是這樣。那是提供 html 文件的唯一時(shí)間。 html 文件有一個(gè) .js 文件的腳本標(biāo)記，它將控制 index.html 頁(yè)面。所有后續(xù)調(diào)用僅返回?cái)?shù)據(jù)，通常為 json 格式。應(yīng)用程序使用此 json 數(shù)據(jù)動(dòng)態(tài)更新頁(yè)面。但是，頁(yè)面永遠(yuǎn)不會(huì)重新加載。

一旦應(yīng)用程序啟動(dòng)，客戶端（而不是服務(wù)器）處理將數(shù)據(jù)轉(zhuǎn)換為 html 的工作。基本上，大多數(shù)現(xiàn)代 spa 框架都有一個(gè)在瀏覽器中運(yùn)行的模板引擎來(lái)生成 html。

將此與傳統(tǒng)的 Web 應(yīng)用程序形成對(duì)比。在傳統(tǒng)應(yīng)用中，每次應(yīng)用調(diào)用服務(wù)器時(shí)，服務(wù)器都會(huì)渲染整個(gè)html頁(yè)面。客戶端接收呈現(xiàn)的頁(yè)面并觸發(fā)頁(yè)面刷新。在這種情況下，瀏覽器是客戶端。

下圖解釋了兩種方法之間的區(qū)別：

單頁(yè)面應(yīng)用的優(yōu)勢(shì)

很明顯，由于我們不會(huì)為每個(gè)用戶交互通過(guò)網(wǎng)絡(luò)發(fā)送任何 html，因此可以節(jié)省大量時(shí)間和帶寬。由于各種開始和結(jié)束標(biāo)簽，html 版本通常更大。此外，在傳統(tǒng)方法中，每次向服務(wù)器發(fā)出請(qǐng)求時(shí)，我們也會(huì)加載大量重復(fù)的 html。通過(guò)遵循 spa 方法，應(yīng)用程序變得更加敏感。

無(wú)需猜測(cè)，更快的數(shù)據(jù)刷新和更少的帶寬消耗會(huì)帶來(lái)更好的用戶體驗(yàn)。這在移動(dòng)設(shè)備和較慢的互聯(lián)網(wǎng)連接上非常有用。

有一些反對(duì)單頁(yè) Web 應(yīng)用程序的論據(jù)說(shuō)，javascript 包的大小可能會(huì)變得臃腫。然而，大多數(shù)優(yōu)秀的 spa 框架都提供了很好的代碼拆分方法。這可以控制您的包大小并在適用的情況下執(zhí)行按需加載。

一個(gè)不太明顯的好處是關(guān)于單頁(yè)面應(yīng)用的整體架構(gòu)。使用 json 發(fā)送應(yīng)用程序數(shù)據(jù)在視圖層 (html) 和應(yīng)用程序?qū)又g創(chuàng)建了一種分離。這將表示層和應(yīng)用層解耦，并允許開發(fā)人員獨(dú)立發(fā)展每一層。您可以在不更改應(yīng)用程序邏輯的情況下替換 html 標(biāo)記。客戶端和服務(wù)器也是完全獨(dú)立的。

另一個(gè)被忽視的好處是單頁(yè)應(yīng)用程序的生產(chǎn)部署。單頁(yè)面應(yīng)用非常容易部署。當(dāng)您構(gòu)建用于生產(chǎn)的 spa 時(shí)，您通常會(huì)得到一個(gè) html 文件、一個(gè) css 包和一個(gè) javascript 包。任何靜態(tài)內(nèi)容服務(wù)器都可以托管這些文件。很好的例子是 nginx、amazon s3 bucket、apache 或 firebase。

單頁(yè)面應(yīng)用的缺點(diǎn)

單頁(yè) Web 應(yīng)用程序的最大缺點(diǎn)之一是它們無(wú)法被像谷歌這樣的搜索引擎正確索引。 由于除了初始 index.html 文件之外沒有 html 標(biāo)記，搜索引擎無(wú)法索引內(nèi)容，因?yàn)樗鼈兊呐老x無(wú)法執(zhí)行用于生成 html 的 javascript。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。