web單頁應(yīng)用是什么？

Web單頁應(yīng)用就是指只有一個Web頁面作為入口的應(yīng)用，在瀏覽器中運行期間不會重新加載頁面。也就是說瀏覽器一開始會加載它必需的thml、css和Js，之后所有的交互操作都在一個頁面上完成，這些都是由JavaScript動態(tài)的加載合適的內(nèi)容來響應(yīng)用戶的操作，所以Web單頁應(yīng)用會包含大量的js代碼，支持單個頁面上與多個組件進(jìn)行豐富的交互。我們一般可以認(rèn)為單頁應(yīng)用是一種從Web服務(wù)器加載的富客戶端。

web單頁應(yīng)用的好處

相比傳統(tǒng)網(wǎng)站而已，我們認(rèn)為單頁應(yīng)用的好處主要有：

**1、提供了更加吸引人的用戶體驗：**具有桌面應(yīng)用的即時性、網(wǎng)站的可移植性和可訪問性。

2、單頁應(yīng)用的內(nèi)容的改變不需要重新加載整個頁面，web應(yīng)用更具響應(yīng)性和更令人著迷。

3、單頁應(yīng)用沒有頁面之間的切換，就不會出現(xiàn)“白屏現(xiàn)象”,也不會出現(xiàn)假死并有“閃爍”現(xiàn)象。

**4、單頁應(yīng)用相對服務(wù)器壓力小，服務(wù)器只用出數(shù)據(jù)就可以，**不用管展示邏輯和頁面合成，吞吐能力會提高幾倍。

**5、良好的前后端分離。**后端不再負(fù)責(zé)模板渲染、輸出頁面工作，后端API通用化，即同一套后端程序代碼，不用修改就可以用于Web界面、手機(jī)、平板等多種客戶端。

web單頁應(yīng)用的缺點

1、首次加載耗時比較多。
解決辦法：可以采用基于HTTP Chunk 的首屏數(shù)據(jù)漸進(jìn)式預(yù)加載方案，該方案總體減少了單頁應(yīng)用1.2s的首屏呈現(xiàn)時間。首屏數(shù)據(jù)漸進(jìn)式預(yù)加載的優(yōu)化思路也得到了體現(xiàn)： 優(yōu)化首屏數(shù)據(jù)加載節(jié)點的速度。 預(yù)先加載首屏數(shù)據(jù)，使得多個串行節(jié)點并行化。

2、SEO問題，不利于百度，360等搜索引擎收錄。
解決辦法：可以采用prerender服務(wù)，它拿到請求夠，直接在服務(wù)端的一個js engine里，運行這個HTML(就像瀏覽器做的那樣)，直到內(nèi)容動態(tài)填完之后，再廣播一個事件告訴phantomjs“內(nèi)容已經(jīng)好了，可以返回給爬蟲了”，這樣爬蟲就拿到了一份完整的HTML，就和在瀏覽器里渲染完的一樣。目前流行的框架都有對應(yīng)的服務(wù)器渲染框架，如：

Rect服務(wù)器渲染框架：Next.js
vue服務(wù)器渲染框架：Nuxt.js

3、如有造成Css命名沖突。
解決辦法：我們可以使用Sass、LESS和Stylus等CSS預(yù)處理器，在一定程度上可以解決該問題。

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

總結(jié)

以上是生活随笔為你收集整理的简述单页应用的优缺点的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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