淺談單頁Web應用(SPA):工作原理及優缺點

2020-12-06 51CTO

淺談單頁Web應用（SPA）：工作原理及優缺點

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

作者：陳峻編譯來源：51CTO|2019-03-13 09:00

【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。基本上，大多數現代單頁應用框架都擁有一個，能夠在瀏覽器中運行的模板引擎，從而生成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】

【責任編輯：

龐桂玉

TEL：（010）68476606】

點讚 0

相關焦點

  • 噴墨印表機的優缺點_噴墨印表機工作原理
    打開APP 噴墨印表機的優缺點_噴墨印表機工作原理 姚遠香 發表於 2019-04-26 16:35:00 　　噴墨印表機簡介
  • 超臨界二氧化碳裝置淺談優缺點
    超臨界二氧化碳裝置淺談優缺點 ,「12vugqc」超臨界二氧化碳裝置，節能高效,型號齊全,可非標定製,7*24小時售後服務。無錫冠亞從事超臨界二氧化碳裝置的研發,生產,銷售與服務於一體的企業。
  • 霍爾傳感器的原理是什麼?有哪些應用?有什麼優缺點?
    霍爾傳感器工作示意圖：外部旋轉磁場經霍爾傳感器，產生周期變化的信號，再通過傳感器內部電路處理，輸出數位訊號，或者模擬信號。其核心就是感應外部磁場（輸入），產生電壓（輸出）。這就是霍爾傳感器的工作原理。霍爾傳感器的應用上面，我們對霍爾傳感器的原理和基本類型有了大體的認識。那麼，接下來，我們看看霍爾傳感器有哪些應用。當然，首先就是用在直流無刷電機上。
  • 直觀動態圖展示6種空壓機工作原理及優缺點對比
    直觀動態圖展示6種空壓機工作原理及優缺點對比 2018-07-19 12:31　來源: 機械設備維修保養大全 空壓機是壓縮氣體體積並提高氣體壓力和輸送氣體的機械設備，作為一種動力能源的消耗產品
  • 霍爾傳感器工作原理及應用
    我們知道霍爾傳感器一個使用非常廣泛的傳感器，它在錄像機、電動車、汽車、電腦散熱風扇中等不少領域中都得到了應用。霍爾傳感器工作原理是什麼？霍爾傳感器有著哪些優缺點呢？今天皮卡中國小編就帶你全面了解霍爾傳感器。
  • 雷射掃描槍的工作原理及優缺點
    雷射掃描槍的使用範圍可以從超市的條形碼識別，到一些紙質文件的電子化儲存，而且使用的效率很高很便捷，能夠大大的提高工作的效率。下面小編就來給大家介紹一下雷射掃描槍的工作原理，以及雷射掃描槍的價格。雷射掃描槍的簡介掃描槍作為光學、機械、電子、軟體應用等技術緊密結合的高科技產品，是繼鍵盤和滑鼠之後的第三代主要的電腦輸入設備。
  • 淺談壓力控制器的工作原理
    打開APP 淺談壓力控制器的工作原理 發表於 2018-11-30 10:11:32 工作原理 能通過把製冷系統的壓力變換為電信號控制電氣系統的工作。壓力控制器由高、 低壓控制兩部分組成的，它們分別與壓縮機高、低壓管相連。
  • 電子警察工作原理及類型優缺點揭密
    電子警察工作原理及類型優缺點揭密電子警察系統是智能交通綜合管理平臺建設項目之一，也是實現現代交通管理的必要手段。　　一、電子警察工作原理　　1、電子眼採用感應線來感應路面上的汽車傳來的壓力，通過傳感器將信號採集到X處理器，送寄存器暫存(該數據在一個紅燈周期內有效)；　　2、在同一個時間間隔內(紅燈周期內)，如果同時產生兩個脈衝信號，即視為「有效」，簡單的說，就是如果當時紅燈，你的前輪子過線了，而後輪子尚未壓線，則只產生了一個脈衝，在沒有連續的兩個脈衝時，不拍照；
  • 鹼性蓄電池的工作原理_鹼性蓄電池的優缺點
    打開APP 鹼性蓄電池的工作原理_鹼性蓄電池的優缺點 網絡整理 發表於 2019-11-25 15:33:48 　　鹼性蓄電池的工作原理 　　鐵鎳蓄電池充電後，正極板上的活性物質是Ni2O3，負極板上的活性物質是Fe。
  • 淺談Nginx負載均衡與F5的區別
    ，web伺服器上的Nginx再進行處理，靜態內容直接訪問本地門戶，動態數據則通過反向代理指向內網服務。筆者在此淺談下Nginx與F5的一些區別。Nginx推薦的配置是，一個工作進程對應一個CPU內核，確保硬體資源的有效利用。一旦NGINX服務起來，僅有工作進程在忙，每個工作進程採用非阻塞地方式處理多個連接，降低上下文切換的次數。每個工作進程都是單線程且獨立運行，負責獲取新連接並進行處理。
  • 詳解地磁感應器原理/應用及優缺點
    打開APP 詳解地磁感應器原理/應用及優缺點 軼名 發表於 2016-10-09 15:45:05 　　「地磁感應器」既是「地磁傳感器」，「地磁傳感器」的工作原理是當駕駛員將車輛停在車位上，「地磁傳感器」將自動感應車輛的停車時間，將時間傳送到中繼站進行計費，市民直接用銀行卡在POS機上繳費。
  • 淺談增程式動力系統結構及工作原理
    打開APP 淺談增程式動力系統結構及工作原理 姚學松 發表於 2020-03-15 10:46:00 本文基於某款增程式電動汽車，結合發動機、發電 機的工作特性，對其發電系統進行能耗分析，發現發動 機高效工作點的轉速與發電機高效工作點的轉速存在不匹配問題，通過在發動機和發電機之間增加變速系統， 設計合適的速比，使發動機和發電機均工作在高效區 域，解決轉速點不匹配問題，可有效提升發電系統的運 行效率，從而進一步降低整車的能耗水平，提升續駛裡 程，具有較高的應用價值。
  • 光伏發電的工作原理以及優缺點介紹
    二、光伏發電的工作原理太陽光照在半導體p-n結上，形成新的空穴-電子對，在p-n結內建電場的作用下，空穴由n區流向p區，電子由p區流向n區，接通電路後就形成電流。這就是光電效應太陽能電池的光伏發電工作原理。
  • 毫米波雷達的工作原理及優缺點介紹
    打開APP 毫米波雷達的工作原理及優缺點介紹 發表於 2018-04-24 11:10:18 　　所謂的毫米波雷達，就是指工作頻段在毫米波頻段的雷達，測距原理跟一般雷達一樣，也就是把無線電波（雷達波）發出去，然後接收回波，根據收發之間的時間差測得目標的位置數據。毫米波雷達就是這個無線電波的頻率是毫米波頻段。
  • 後備式UPS電源和在線式UPS工作原理和優缺點
    後備式UPS電源和在線式UPS工作原理和優缺點。目前市場上的UPS不間斷電源主要分為兩大類：在線式UPS電源與後備式UPS電源。我們在負載小功率設備的時候，如果設備本身對電能的要求不是很高的話，一般情況下都使用後備式的UPS電源來進行負載，如果大家負載很精密或者數據很重要的設備的時候，建議購買在線式的UPS電源。
  • 淺談手機中振動馬達電機的工作原理
    打開APP 淺談手機中振動馬達電機的工作原理 工程師飛燕 發表於 2018-06-29 11:05:00
  • 蒸汽拖把的工作原理是什麼 蒸汽拖把的優缺點
    大家知道蒸汽拖把的工作原理是什麼嗎？以及蒸汽拖把有哪些優缺點？請看下文。 一、蒸汽拖把的工作原理是什麼 蒸汽拖把其原理是通過把水加熱，產生壓力和高溫，直接通過高溫高壓蒸汽來消毒除菌，清潔居家環境。蒸汽拖把一般有高溫殺菌、去除油汙等功能。利用高壓產生蒸氣，即可清潔又殺菌，輕輕鬆鬆對付難纏的汙垢。
  • 原生APP和web應用APP有什麼不一樣?他們都有哪些優缺點
    那麼對於應用開發來選擇的話是選擇原生應用還是選擇web應用？原生應用的開發成本是大於web應用的成本。安卓官方給定的安卓開發語言是java，而web應用的開發沒有語言限制，你可以是java，python，php，asp，aspx等等主流的文語言都可以。而相對於原生應用web應用所需要的費用會大大降低，而許多webapp基本上就是一個網站打包成應用的模式。所以費用相對來低。2、性能方面。
  • 聚合物電池的工作原理_聚合物電池的優缺點
    打開APP 聚合物電池的工作原理_聚合物電池的優缺點 網絡整理 發表於 2020-04-16 14:28:03 　　聚合物電池的工作原理 　　聚合物電池的原理與液態鋰相同，主要區別是電解液與液態鋰不同。
  • 鎳氫電池的工作原理_鎳氫電池的優缺點
    打開APP 鎳氫電池的工作原理_鎳氫電池的優缺點 發表於 2019-10-24 14:39:38 鎳氫電池作為氫能源應用的一個重要方向越來越被人們注意。