【51CTO.com快譯】自2003年被首創以來，單頁Web應用程序(Single Page Web Applications)已經走過它的第15個年頭。如今，它已經成為了現代JavaScript領域不可或缺的一部分。

在和許多開發人員的討論交流中，我發現他們對于單頁應用程序的實際工作方式不甚了了。因此，我決定在此為大家科普一下，深入探究單頁Web應用的工作原理與優缺點。

什么是單頁應用程序?

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

您可能已經開始尋思：這到底意味著什么?一整套應用程序居然只用一個頁面來提供服務，這怎么夠用呢?

答案很簡單。單頁Web應用程序是圍繞著將單個頁面內容進行動態重寫的概念所構建。這與從服務器端加載過來的預渲染頁面有著本質的不同。

通過采用這種方法，單頁Web應用程序可以避免那些，在服務器上渲染各種頁面時所產生的中斷問題。因此，這就消除了一直以來困惑在Web開發業界的一個***問題：如何才能向用戶提供無縫的訪問體驗。

既然聽起來這是一個很棒的主意，讓我們接著來看看它是如何運作的，相信您一定會感到更為驚訝。

魔術是如何發生的?

在單頁Web應用程序中，當瀏覽器向服務器發出***個請求時，服務器會返回一個index.html文件。就這么簡單，不過這也是全程唯一提供HTML文件的一次。

該HTML文件為.js類型的文件準備了一個腳本標簽，而該標簽正好可以被用來控制index.html頁面。由于所有后續的調用都只會返回JSON格式的數據，因此應用程序也就使用此類JSON數據，來動態地更新頁面。不過值得注意的是，該頁面將不再也永遠不會被重新加載。

一旦應用程序被啟動，客戶端(而不是服務器)就會通過處理，將數據轉換為HTML?；旧希蠖鄶惮F代單頁應用框架都擁有一個，能夠在瀏覽器中運行的模板引擎，從而生成HTML。

通過與傳統的Web應用程序相比較，你不難發現：在傳統應用程序中，在每次應用程序調用服務器時，服務器都需要渲染整個HTML頁面。相應地，客戶端會接收到被渲染的頁面，并觸發整個頁面的刷新。因此在這種情況下，瀏覽器扮演的就是客戶端的角色。

為了更加直觀地說明兩種方法的不同之處，我們為您準備了如下的對比圖：

SPA有何優勢?

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

SPA是否有缺點?

• 凡事都有利有弊。對單頁Web應用程序來說，其***缺點在于：它們無法被Google等搜索引擎正確地編入索引。由于除了其最初的index.html文件之外，其他都沒有HTML標簽，因此對于各類搜索引擎的爬取工具來說，它們無法執行并生成HTML的JavaScript，也就完全無法索引到任何相關內容。

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

• 雖然業界還有一些針對SPA的使用偏好和復雜性之類的批評。但是在我看來，這些觀點只是見仁見智罷了。

總而言之，我們需要認真地考慮自己的項目用例與場景，才能判斷出哪一種方法最適合自身的應用開發需求。

原文標題：How Single Page Web Applications Actually Work，作者：Saurabh Dashora

【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】