【譯】單頁面應用程序（SPA）vs 多頁面應用程序（MPA）：選擇哪一個用於web開發

原文連接：Single-Page Apps(SPA) vs Multi-Page Apps(MPA): What To Choose For Web Development

一個成功的web應用程序始於爲它選擇正確的技術棧和架構。在web開發方面，選擇SPA（single-page applications）仍是MPA（multiple-page applications）一直是一個熱議的話題。面對如此多的不一樣意見，你可能很難決定使用哪一個來構建你的的web應用程序。本文對SPA和MPA的優缺點進行了清晰的解釋，並在最後列出了SPA和MPA的最佳使用場景。

什麼是SPA？

包含在一個頁面中的應用程序稱之爲SPA。

當你訪問SPA時，瀏覽器會下載整個應用程序的數據。所以，你瀏覽應用程序的不一樣部分時頁面不會從新加載。

這是由於SPA在瀏覽器而不是在服務器上執行邏輯。它使用JavaScript框架來實現這一點，JavaScript框架能夠在客戶端處理大量數據。JavaScript還容許SPA只從新加載用戶請求的部分，而不是整個應用程序。所以，SPA以提供快速高效的性能而聞名。

JavaScript框架一般用於構建漂亮、高性能的SPA。使用Angular、Reactjs是構建SPA的常見選擇。

儘管SPA是最近纔出現的，但使用它的網頁無處不在。像Gmail和Google Docs這樣的大多數Google應用程序都是使用Angular構建的SPA。甚至GitHub也是一個SPA。不少在線內容平臺也是SPA。Netflix是SPA的一個突出例子。

像Facebook和Twitter這樣的流行社交網絡平臺都是用Reactjs構建的SPA。然而，這些應用更多的是混合應用，它們也使用多頁面架構來執行某些操做。例如，Feed標籤頁是一個完整的SPA，在這個頁面滾動不須要從新加載頁面。可是，從Feed標籤頁移動到其餘標籤頁（如Photos或Friends）確實須要從新加載頁面。

什麼是MPA？

顧名思義，MPA是一個具備多個頁面的應用程序。它的工做方式和傳統的靜態頁面同樣：每當用戶與應用程序交互都須要從新加載頁面。

MPA一般包含大量數據和複雜的結構，它的頁面大多包含靜態內容和指向其餘內部頁面的連接。這就是爲何MPA的用戶界面更復雜和多層。

你能夠簡單地用HTML和CSS來構建MPA。然而，許多開發人員也選擇使用JavaScript和jQuery來提升應用程序的性能。

大多數大型電子商務應用程序都是使用MPA構建的。

SPA vs MPA：SPA的優勢

SPA的出現只是由於開發人員但願克服MPA帶來的限制。SPA的主要優勢包括：

• 速度和響應能力
  • 在SPA和MPA的性能方面，前者老是勝出。在SPA中，大多數資源（如HTML、CSS和Javascript）不須要每次交互都加載。初始加載後，只有新數據在服務器和瀏覽器之間傳輸。
  • 此外，SPA只在用戶請求時從新加載所需的內容。因此SPA的服務器負載很是輕。所以，SPA的使用和交互比MPA快得多。
• 移動端友好
  • 網站若是想從移動端上獲取大部分流量，應用程序就須要一個移動端友好的版本。SPA使你可以重用web應用程序的後端代碼來構建移動應用程序。
  • 使用SPA可使移動應用程序的開發過程更輕鬆、更快。此外，因爲SPA中的UI已經以應用程序的形式進行了設計，因此不須要爲移動設備從新調整UI。
• 線性用戶體驗
  • SPA爲用戶提供了一個有組織的線性界面。從web應用程序的名稱到其內容列表，全部內容都被組織成了從上到下的結構，這使得SPA很是容易導航。
  • 由於SPA不須要單擊連接實現內容的過分，因此經過滾動頁面用戶就能夠體驗無縫的瀏覽。
• 前端和後端的明確劃分
  • SPA容許你保持前端和後端徹底獨立。這樣作的主要優勢是你的開發團隊能夠同時開展前端和後端工做。
  • 此外，因爲SPA能夠從UI元素中區分出數據，測試SPA就不會那麼困難了。
  • SPA還能夠方便地擴展應用程序或更改數據獲取的方式。你能夠很容易地作到這一點，而沒必要擔憂它對UI的影響。你也能夠重寫應用程序的前端而不影響服務器，除了須要替換一些靜態文件。
• 緩存功能和離線支持
  • SPA因其高效緩存任何本地數據的能力而備受青睞。SPA只須要向服務器發送一次請求。以後，它存儲從服務器接收的全部數據，以便在須要時使用這些數據。所以，即便在設備失去互聯網鏈接的狀況下，SPA也能夠在很大程度上發揮做用。
• 使用chrome易於調試
  • 在SPA中使用chrome進行調試比在MPA中調試要容易得多。這有兩個根本緣由。首先，你能夠在一個頁面上同時查看整個代碼。其次，構建SPA的框架有本身調試工具。例如，你能夠經過React developer tools和Vue.js devtools輕鬆調試用React和Vue構建的SPA。

SPA vs MPA：SPA的缺點

選擇SPA架構有其自身的缺點。可是，經過SPA最佳實踐能夠克服大多數。

• SPA不是很適合搜索引擎優化（SEO）
  • SEO是選擇SPA仍是MPA的一個決定性因素。SPA使用JavaScript運行，它只在用戶交互後才加載內容。所以，當網絡爬蟲試圖在搜索引擎中索引頁面時，SPA看起來就像一個沒有內容的空頁面。
  • 此外，SPA是經過將全部內容合併到一個網頁中來開發的。因此你不能根據相關關鍵字對內容的不一樣部分進行排名。可是，經過服務器端渲染（SSR）和intelligent search engine optimiztion practices，你能夠克服這一限制。
• SPA須要額外實現瀏覽器的前進後退功能
  • spa的一個主要缺點是：用戶沒法經過點擊back按鈕返回到應用程序的先前狀態。相反，瀏覽器會將它們帶到上一頁，這時由於SPA不能保存用戶在頁面不一樣狀態之間的跳轉。這樣的行爲可能會讓用戶感到厭煩。
  • 然而，這個問題也能夠經過爲SPA框架配備HTML5 History API來解決。使用此接口，開發人員能夠經過JavaScript訪問瀏覽器導航歷史記錄。
• SPA面臨更大的安全風險
  • 雖然保護SPA比保護MPA快得多，但它可能不必定是很是有效的。SPA運行在JavaScript上，而JavaScript不進行代碼編譯。所以，黑客能夠利用跨站點腳本（XSS）來訪問應用程序的客戶端代碼庫並向其注入惡意代碼。
  • 防範這種安全威脅的最佳方法是確保只向瀏覽器發送可下載的數據。它有助於將可下載的JavaScript分解成更小的塊，以確保其安全性。
• SPA過於依賴JavaScript
  • SPA是在JavaScript上構建和運行的。這種對JavaScript的依賴有時會阻礙應用程序的性能。若是用戶在瀏覽器中禁用了JavaScript，他們根本看不到你的應用程序內容，頁面看起來就像一張空白頁。這可能致使更高的跳出率，以及更糟的SEO表現。
• SPA不容易擴展
  • 這就是爲何MPA在SPA與MPA之爭中仍然佔據強勢地位的緣由，SPA不容易擴展。若是在現有的SPA中添加更多的內容或功能，將會在很大程度上增長應用程序的初始加載時間，並影響應用程序的性能。

SPA vs MPA：MPA的優勢

若是你的web應用程序須要知足不一樣的用戶羣，MPA能夠提供很大的幫助。

• MPA更適合搜索引擎優化（SEO）
  • MPA提供的最大優點就是搜索引擎優化。與SPA不一樣，你能夠將MPA的不一樣頁面用於不一樣的內容。這樣，每一個頁面均可以針對特定的關鍵字進行優化。經過向這些優化的頁面添加適當的meta標記，你的web應用程序頁面能夠在google SERP上得到更好的排名。
• MPA易於擴展
  • 向MPA添加新內容或功能沒有限制。你能夠根據須要嚮應用程序添加任意數量的新頁面，以容納更多內容。所以，若是你的應用包含許多特性、產品或服務，那麼MPA是web開發的理想選擇。
• MPA能夠更好的利用Google Analytics
  • Google Analytics爲不一樣的頁面生成不一樣的報告。對於MPA，你能夠利用Google Analytics來了解應用程序的哪些頁面性能良好，哪些頁面性能不佳。基於這些，你能夠對web應用程序的內容進行更改，以提升其可見性和頁面停留時間。
  • SPA只有一個頁面，所以很難肯定應用程序的哪一個部分性能不佳。
• MPA爲用戶提供大型應用程序的可視化地圖
  • 當你打算構建一個大型應用程序時，就不要糾結選擇MPA仍是SPA了。
  • 若是你計劃經過web應用程序共享大量信息，那麼你須要一個可以將其組織成不一樣類別的結構。例如，若是你想創建一個電子商務商店，你不能在一個頁面上容納你的全部產品。
  • MPA不只能清晰地組織信息，並且能讓用戶很容易地找到他們要找的東西。你在其中對內容進行分類的選項卡就像一個可視化地圖，用戶能夠在沒有任何混亂的狀況下進行導航。

SPA vs MPA：MPA的缺點

MPA存在必定的侷限性。這些缺點是社區在各類項目中迅速採用SPA的緣由。

• 複雜的開發和測試
  • 前端和後端在MPA中緊密耦合。MPA的開發和測試更加耗時。此外，在前端進行更改可能還須要在後端進行更改。這給開發團隊增長了更多的負擔。
• 較慢的性能
  • 在MPA中，每次用戶交互或移動到應用程序的不一樣部分時，瀏覽器都必須下載全部應用程序數據。這會影響MPA的速度和性能。
• 不易於維護和更新
  • 開發人員須要按期維護MPA的每個頁面。這可能比維護單個頁面應用程序更加困難。此外，你還須要分別保護每一個頁面，這增長了整體開發負擔。

SPA vs MPA：使用哪一個用於web開發

正如咱們上面所解釋的，每種架構都有本身的優缺點。爲了作出正確的選擇，你必須首先明確你的商業目標。而後，概述爲了實現這些目標須要具有的功能。

最好在如下狀況下使用SPA：

• web應用程序的主要目標是品牌故事講述。
• 你想在未來構建一個更大的應用程序的小版本。
• 當你的應用程序不嚴重依賴搜索引擎優化。spa是SaaS產品、社交網絡和其餘動態應用程序（不須要在網頁內容的切換上從新刷新網頁）的理想選擇。

另外一方面，MPA的可擴展性和SEO友好性在如下狀況下更爲有利：

• 你想經過應用程序展現大量的產品、服務或功能。
• 你的應用程序須要搜索引擎排名。
• 你想要迎合不一樣的用戶羣，有許多不一樣的需求和偏好。