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.jsvue伺服器渲染框架：Nuxt.js

3、如有造成Css命名衝突。

解決辦法：我們可以使用Sass、LESS和Stylus等CSS前處理器，在一定程度上可以解決該問題。

4、前進、後退、位址列、書籤等，都需要程式進行管理，頁面的複雜度很高，需要一定的技能水平和開發成本高。

不好的是 首次載入慢,資料都是非同步獲取不利於seo，好處是元件化開發，效率高，適合做一些複雜的系統之類的，一般系統都不用考慮seo所以很合適