定義

單頁(yè) Web 應(yīng)用 (single-page application 簡(jiǎn)稱為 SPA) 是一種特殊的 Web 應(yīng)用。它將所有的活動(dòng)局限于一個(gè)Web頁(yè)面中，僅在該Web頁(yè)面初始化時(shí)加載相應(yīng)的HTML、JavaScript 和 CSS。一旦頁(yè)面加載完成了，SPA不會(huì)因?yàn)橛脩舻牟僮鞫M(jìn)行頁(yè)面的重新加載或跳轉(zhuǎn)。取而代之的是利用 JavaScript 動(dòng)態(tài)的變換HTML的內(nèi)容，從而實(shí)現(xiàn)UI與用戶的交互。由于避免了頁(yè)面的重新加載，SPA 可以提供較為流暢的用戶體驗(yàn)。

優(yōu)缺點(diǎn)

單頁(yè)Web程序的出現(xiàn)是富客戶端發(fā)展的必然結(jié)果，但是該技術(shù)也是有些局限性，所以采用之前需要了解清楚它的優(yōu)缺點(diǎn)。

優(yōu)點(diǎn)：

良好的交互體驗(yàn)

用戶不需要重新刷新頁(yè)面，獲取數(shù)據(jù)也是通過(guò)Ajax異步獲取，頁(yè)面顯示流暢。

良好的前后端工作分離模式

單頁(yè)Web應(yīng)用可以和RESTful規(guī)約一起使用，通過(guò)REST API提供接口數(shù)據(jù)，并使用Ajax異步獲取，這樣有助于分離客戶端和服務(wù)器端工作。更進(jìn)一步，可以在客戶端也可以分解為靜態(tài)頁(yè)面和頁(yè)面交互兩個(gè)部分。

減輕服務(wù)器壓力

服務(wù)器只用出數(shù)據(jù)就可以，不用管展示邏輯和頁(yè)面合成，吞吐能力會(huì)提高幾倍；

共用一套后端程序代碼

不用修改后端程序代碼就可以同時(shí)用于Web界面、手機(jī)、平板等多種客戶端；

缺點(diǎn)：

SEO難度較高

由于所有的內(nèi)容都在一個(gè)頁(yè)面中動(dòng)態(tài)替換顯示，所以在SEO上其有著天然的弱勢(shì)，所以如果你的站點(diǎn)對(duì)SEO很看重，且要用單頁(yè)應(yīng)用，那么就做些靜態(tài)頁(yè)面給搜索引擎用吧。

前進(jìn)、后退管理

由于單頁(yè)Web應(yīng)用在一個(gè)頁(yè)面中顯示所有的內(nèi)容，所以不能使用瀏覽器的前進(jìn)后退功能，所有的頁(yè)面切換需要自己建立堆棧管理，當(dāng)然此問(wèn)題也有解決方案，比如利用URI中的散列+iframe實(shí)現(xiàn)。

初次加載耗時(shí)多

為實(shí)現(xiàn)單頁(yè)Web應(yīng)用功能及顯示效果，需要在加載頁(yè)面的時(shí)候?qū)avaScript、CSS統(tǒng)一加載，部分頁(yè)面可以在需要的時(shí)候加載。所以必須對(duì)JavaScript及CSS代碼進(jìn)行合并壓縮處理，如果使用第三方庫(kù)，建議使用一些大公司的CDN，因此帶寬的消耗是必然的。

框架

AngularJS

AngularJS是一個(gè) MV* 框架，最適于開發(fā)客戶端的單頁(yè)面應(yīng)用。它不是個(gè)功能庫(kù)，而是用來(lái)開發(fā)動(dòng)態(tài)網(wǎng)頁(yè)的框架。它專注于擴(kuò)展HTML的功能，提供動(dòng)態(tài)數(shù)據(jù)綁定（data binding），而且它能跟其它框架（如jQuery）合作融洽。

如果你要開發(fā)的是單頁(yè)應(yīng)用，AngularJS就是你的上上之選。Gmail、Google Docs、Twitter和Facebook這樣的應(yīng)用，都很能發(fā)揮AngularJS的長(zhǎng)處。但是像游戲開發(fā)之類對(duì)DOM進(jìn)行大量操縱、又或者單純需要極高運(yùn)行速度的應(yīng)用，就不是AngularJS的用武之地了。

Avalon

Avalon 是一個(gè) MV* 框架，國(guó)內(nèi)迷你簡(jiǎn)單易用的MVVM框架

新人創(chuàng)作打卡挑戰(zhàn)賽發(fā)博客就能抽獎(jiǎng)！定制產(chǎn)品紅包拿不停！

總結(jié)

以上是生活随笔為你收集整理的SPA 单页Web应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。