建站
咨詢
售后
建站咨詢
新聞中心
自2003年被首創(chuàng)以來，單頁Web應(yīng)用程序(Single Page Web Applications)已經(jīng)走過它的第15個年頭。如今，它已經(jīng)成為了現(xiàn)代JavaScript領(lǐng)域不可或缺的一部分。
成都創(chuàng)新互聯(lián)主營廣水網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都App定制開發(fā),廣水h5小程序開發(fā)搭建,廣水網(wǎng)站營銷推廣歡迎廣水等地區(qū)企業(yè)咨詢
在和許多開發(fā)人員的討論交流中，我發(fā)現(xiàn)他們對于單頁應(yīng)用程序的實際工作方式不甚了了。因此，我決定在此為大家科普一下，深入探究單頁Web應(yīng)用的工作原理與優(yōu)缺點。
什么是單頁應(yīng)用程序?
在我看來***的定義應(yīng)該是：單頁Web應(yīng)用程序是一種只需要將單個頁面加載到瀏覽器之中的Web應(yīng)用程序。
您可能已經(jīng)開始尋思：這到底意味著什么?一整套應(yīng)用程序居然只用一個頁面來提供服務(wù)，這怎么夠用呢?
答案很簡單。單頁Web應(yīng)用程序是圍繞著將單個頁面內(nèi)容進(jìn)行動態(tài)重寫的概念所構(gòu)建。這與從服務(wù)器端加載過來的預(yù)渲染頁面有著本質(zhì)的不同。
通過采用這種方法，單頁Web應(yīng)用程序可以避免那些，在服務(wù)器上渲染各種頁面時所產(chǎn)生的中斷問題。因此，這就消除了一直以來困惑在Web開發(fā)業(yè)界的一個***問題：如何才能向用戶提供無縫的訪問體驗。
既然聽起來這是一個很棒的主意，讓我們接著來看看它是如何運(yùn)作的，相信您一定會感到更為驚訝。
魔術(shù)是如何發(fā)生的?
在單頁Web應(yīng)用程序中，當(dāng)瀏覽器向服務(wù)器發(fā)出***個請求時，服務(wù)器會返回一個index.html文件。就這么簡單，不過這也是全程唯一提供HTML文件的一次。
該HTML文件為.js類型的文件準(zhǔn)備了一個腳本標(biāo)簽，而該標(biāo)簽正好可以被用來控制index.html頁面。由于所有后續(xù)的調(diào)用都只會返回JSON格式的數(shù)據(jù)，因此應(yīng)用程序也就使用此類JSON數(shù)據(jù)，來動態(tài)地更新頁面。不過值得注意的是，該頁面將不再也永遠(yuǎn)不會被重新加載。
一旦應(yīng)用程序被啟動，客戶端(而不是服務(wù)器)就會通過處理，將數(shù)據(jù)轉(zhuǎn)換為HTML?；旧?，大多數(shù)現(xiàn)代單頁應(yīng)用框架都擁有一個，能夠在瀏覽器中運(yùn)行的模板引擎，從而生成HTML。
通過與傳統(tǒng)的Web應(yīng)用程序相比較，你不難發(fā)現(xiàn)：在傳統(tǒng)應(yīng)用程序中，在每次應(yīng)用程序調(diào)用服務(wù)器時，服務(wù)器都需要渲染整個HTML頁面。相應(yīng)地，客戶端會接收到被渲染的頁面，并觸發(fā)整個頁面的刷新。因此在這種情況下，瀏覽器扮演的就是客戶端的角色。
為了更加直觀地說明兩種方法的不同之處，我們?yōu)槟鷾?zhǔn)備了如下的對比圖：
SPA有何優(yōu)勢?
- 顯而易見，由于我們不可能總是通過網(wǎng)絡(luò)，為與用戶的每次交互發(fā)送各種HTML頁面，因此單頁應(yīng)用能夠節(jié)省大量的時間和帶寬。在傳統(tǒng)方法中，每次我們向服務(wù)器發(fā)出請求時，既需要用到各種打開與關(guān)閉標(biāo)簽，又需要加載大量重復(fù)的HTML代碼，而且HTML本身的代碼量并不小。因此，如果我們遵循SPA方法，則會大幅提到應(yīng)用程序的響應(yīng)能力。
- 由于SPA方法不再需要用標(biāo)簽去猜測數(shù)據(jù)，因此這又在一定程度上加快了數(shù)據(jù)的刷新，并減少了帶寬的消耗，同時能夠給用戶也帶來更好的體驗。而這對于移動設(shè)備、或是在較慢的互聯(lián)網(wǎng)連接場景中，恰恰是非常有用的。
- 雖然那些單頁Web應(yīng)用持否定態(tài)度的開發(fā)人員會爭辯說：JavaScript包的大小有可能會因此變得臃腫。但是客觀而言，如今大多數(shù)優(yōu)秀的SPA框架都提供了很好的代碼分割方法。因此，我們可以通過檢查捆綁包的大小，只在適用的情況下再進(jìn)行按需加載。
- 另一個關(guān)于SPA整體架構(gòu)但不太明顯的好處是：使用JSON發(fā)送應(yīng)用數(shù)據(jù)的方式，會在HTML的視圖層和應(yīng)用程序?qū)又g創(chuàng)建一種分離。這便使得表示層與應(yīng)用層相分離，以方便不同的開發(fā)人員去獨立地開發(fā)每一個層面。因此，您可以在不修改應(yīng)用程序邏輯的情況下，去替換某些HTML標(biāo)記。當(dāng)然，客戶端和服務(wù)器也是完全相互獨立的。
- 同時，還有一個可能被忽略的優(yōu)勢是：單頁應(yīng)用程序在生產(chǎn)環(huán)境中的部署特性。由于SPA非常易于被部署，那么我們在生產(chǎn)環(huán)境中構(gòu)建SPA時，會很容易地最終得到一個HTML文件、一個CSS包和一個JavaScript包。因此，任何靜態(tài)內(nèi)容服務(wù)器都可以被用來存放這些文件。此類服務(wù)器包括：Nginx、Amazon S3 Bucket、Apache和Firebase。
SPA是否有缺點?
- 凡事都有利有弊。對單頁Web應(yīng)用程序來說，其***缺點在于：它們無法被Google等搜索引擎正確地編入索引。由于除了其最初的index.html文件之外，其他都沒有HTML標(biāo)簽，因此對于各類搜索引擎的爬取工具來說，它們無法執(zhí)行并生成HTML的JavaScript，也就完全無法索引到任何相關(guān)內(nèi)容。
不過可喜的是，在Google官方的公告中(請參見：https://webmasters.googleblog.com/2015/10/deprecating-our-ajax-crawling-scheme.html)，他們的搜索引擎如今已經(jīng)能夠爬取AJAX的各種調(diào)用了。
- 雖然業(yè)界還有一些針對SPA的使用偏好和復(fù)雜性之類的批評。但是在我看來，這些觀點只是見仁見智罷了。
總而言之，我們需要認(rèn)真地考慮自己的項目用例與場景，才能判斷出哪一種方法最適合自身的應(yīng)用開發(fā)需求。
文章標(biāo)題：淺談單頁Web應(yīng)用（SPA）：工作原理及優(yōu)缺點
鏈接URL：http://fisionsoft.com.cn/article/codcohi.html
