web單頁應用是什么？

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

web單頁應用的好處

相比傳統網站而已，我們認為單頁應用的好處主要有：

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

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

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

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

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

web單頁應用的缺點

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

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

Rect服務器渲染框架：Next.js
vue服務器渲染框架：Nuxt.js

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。