【51CTO.com快譯】自2003年被首創(chuàng)以來(lái)，單頁(yè)Web應(yīng)用程序(Single Page Web Applications)已經(jīng)走過(guò)它的第15個(gè)年頭。如今，它已經(jīng)成為了現(xiàn)代JavaScript領(lǐng)域不可或缺的一部分。

在和許多開(kāi)發(fā)人員的討論交流中，我發(fā)現(xiàn)他們對(duì)于單頁(yè)應(yīng)用程序的實(shí)際工作方式不甚了了。因此，我決定在此為大家科普一下，深入探究單頁(yè)Web應(yīng)用的工作原理與優(yōu)缺點(diǎn)。

什么是單頁(yè)應(yīng)用程序?

在我看來(lái)***的定義應(yīng)該是：?jiǎn)雾?yè)Web應(yīng)用程序是一種只需要將單個(gè)頁(yè)面加載到瀏覽器之中的Web應(yīng)用程序。

您可能已經(jīng)開(kāi)始尋思：這到底意味著什么?一整套應(yīng)用程序居然只用一個(gè)頁(yè)面來(lái)提供服務(wù)，這怎么夠用呢?

答案很簡(jiǎn)單。單頁(yè)Web應(yīng)用程序是圍繞著將單個(gè)頁(yè)面內(nèi)容進(jìn)行動(dòng)態(tài)重寫(xiě)的概念所構(gòu)建。這與從服務(wù)器端加載過(guò)來(lái)的預(yù)渲染頁(yè)面有著本質(zhì)的不同。

通過(guò)采用這種方法，單頁(yè)Web應(yīng)用程序可以避免那些，在服務(wù)器上渲染各種頁(yè)面時(shí)所產(chǎn)生的中斷問(wèn)題。因此，這就消除了一直以來(lái)困惑在Web開(kāi)發(fā)業(yè)界的一個(gè)***問(wèn)題：如何才能向用戶提供無(wú)縫的訪問(wèn)體驗(yàn)。

既然聽(tīng)起來(lái)這是一個(gè)很棒的主意，讓我們接著來(lái)看看它是如何運(yùn)作的，相信您一定會(huì)感到更為驚訝。

魔術(shù)是如何發(fā)生的?

在單頁(yè)Web應(yīng)用程序中，當(dāng)瀏覽器向服務(wù)器發(fā)出***個(gè)請(qǐng)求時(shí)，服務(wù)器會(huì)返回一個(gè)index.html文件。就這么簡(jiǎn)單，不過(guò)這也是全程唯一提供HTML文件的一次。

該HTML文件為.js類(lèi)型的文件準(zhǔn)備了一個(gè)腳本標(biāo)簽，而該標(biāo)簽正好可以被用來(lái)控制index.html頁(yè)面。由于所有后續(xù)的調(diào)用都只會(huì)返回JSON格式的數(shù)據(jù)，因此應(yīng)用程序也就使用此類(lèi)JSON數(shù)據(jù)，來(lái)動(dòng)態(tài)地更新頁(yè)面。不過(guò)值得注意的是，該頁(yè)面將不再也永遠(yuǎn)不會(huì)被重新加載。

一旦應(yīng)用程序被啟動(dòng)，客戶端(而不是服務(wù)器)就會(huì)通過(guò)處理，將數(shù)據(jù)轉(zhuǎn)換為HTML。基本上，大多數(shù)現(xiàn)代單頁(yè)應(yīng)用框架都擁有一個(gè)，能夠在瀏覽器中運(yùn)行的模板引擎，從而生成HTML。

通過(guò)與傳統(tǒng)的Web應(yīng)用程序相比較，你不難發(fā)現(xiàn)：在傳統(tǒng)應(yīng)用程序中，在每次應(yīng)用程序調(diào)用服務(wù)器時(shí)，服務(wù)器都需要渲染整個(gè)HTML頁(yè)面。相應(yīng)地，客戶端會(huì)接收到被渲染的頁(yè)面，并觸發(fā)整個(gè)頁(yè)面的刷新。因此在這種情況下，瀏覽器扮演的就是客戶端的角色。

為了更加直觀地說(shuō)明兩種方法的不同之處，我們?yōu)槟鷾?zhǔn)備了如下的對(duì)比圖：

SPA有何優(yōu)勢(shì)?

• 顯而易見(jiàn)，由于我們不可能總是通過(guò)網(wǎng)絡(luò)，為與用戶的每次交互發(fā)送各種HTML頁(yè)面，因此單頁(yè)應(yīng)用能夠節(jié)省大量的時(shí)間和帶寬。在傳統(tǒng)方法中，每次我們向服務(wù)器發(fā)出請(qǐng)求時(shí)，既需要用到各種打開(kāi)與關(guān)閉標(biāo)簽，又需要加載大量重復(fù)的HTML代碼，而且HTML本身的代碼量并不小。因此，如果我們遵循SPA方法，則會(huì)大幅提到應(yīng)用程序的響應(yīng)能力。
• 由于SPA方法不再需要用標(biāo)簽去猜測(cè)數(shù)據(jù)，因此這又在一定程度上加快了數(shù)據(jù)的刷新，并減少了帶寬的消耗，同時(shí)能夠給用戶也帶來(lái)更好的體驗(yàn)。而這對(duì)于移動(dòng)設(shè)備、或是在較慢的互聯(lián)網(wǎng)連接場(chǎng)景中，恰恰是非常有用的。
• 雖然那些單頁(yè)Web應(yīng)用持否定態(tài)度的開(kāi)發(fā)人員會(huì)爭(zhēng)辯說(shuō)：JavaScript包的大小有可能會(huì)因此變得臃腫。但是客觀而言，如今大多數(shù)優(yōu)秀的SPA框架都提供了很好的代碼分割方法。因此，我們可以通過(guò)檢查捆綁包的大小，只在適用的情況下再進(jìn)行按需加載。
• 另一個(gè)關(guān)于SPA整體架構(gòu)但不太明顯的好處是：使用JSON發(fā)送應(yīng)用數(shù)據(jù)的方式，會(huì)在HTML的視圖層和應(yīng)用程序?qū)又g創(chuàng)建一種分離。這便使得表示層與應(yīng)用層相分離，以方便不同的開(kāi)發(fā)人員去獨(dú)立地開(kāi)發(fā)每一個(gè)層面。因此，您可以在不修改應(yīng)用程序邏輯的情況下，去替換某些HTML標(biāo)記。當(dāng)然，客戶端和服務(wù)器也是完全相互獨(dú)立的。
• 同時(shí)，還有一個(gè)可能被忽略的優(yōu)勢(shì)是：?jiǎn)雾?yè)應(yīng)用程序在生產(chǎn)環(huán)境中的部署特性。由于SPA非常易于被部署，那么我們?cè)谏a(chǎn)環(huán)境中構(gòu)建SPA時(shí)，會(huì)很容易地最終得到一個(gè)HTML文件、一個(gè)CSS包和一個(gè)JavaScript包。因此，任何靜態(tài)內(nèi)容服務(wù)器都可以被用來(lái)存放這些文件。此類(lèi)服務(wù)器包括：Nginx、Amazon S3 Bucket、Apache和Firebase。

SPA是否有缺點(diǎn)?

• 凡事都有利有弊。對(duì)單頁(yè)Web應(yīng)用程序來(lái)說(shuō)，其***缺點(diǎn)在于：它們無(wú)法被Google等搜索引擎正確地編入索引。由于除了其最初的index.html文件之外，其他都沒(méi)有HTML標(biāo)簽，因此對(duì)于各類(lèi)搜索引擎的爬取工具來(lái)說(shuō)，它們無(wú)法執(zhí)行并生成HTML的JavaScript，也就完全無(wú)法索引到任何相關(guān)內(nèi)容。

不過(guò)可喜的是，在Google官方的公告中(請(qǐng)參見(jiàn)：https://webmasters.googleblog.com/2015/10/deprecating-our-ajax-crawling-scheme.html)，他們的搜索引擎如今已經(jīng)能夠爬取AJAX的各種調(diào)用了。

• 雖然業(yè)界還有一些針對(duì)SPA的使用偏好和復(fù)雜性之類(lèi)的批評(píng)。但是在我看來(lái)，這些觀點(diǎn)只是見(jiàn)仁見(jiàn)智罷了。

總而言之，我們需要認(rèn)真地考慮自己的項(xiàng)目用例與場(chǎng)景，才能判斷出哪一種方法最適合自身的應(yīng)用開(kāi)發(fā)需求。

原文標(biāo)題：How Single Page Web Applications Actually Work，作者：Saurabh Dashora

【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文譯者和出處為51CTO.com】