淺談前端SPA（單頁面應用）

 

 

單頁Web應用（single page web application，SPA）： SPA 是一種特殊的 Web 應用，是加載單個 HTML 頁面並在用戶與應用程序交互時動態更新該頁面的。它將全部的活動侷限於一個 Web 頁面中，僅在該 Web 頁面初始化時加載相應的 HTML 、 JavaScript 、 CSS 。一旦頁面加載完成， SPA 不會由於用戶的操做而進行頁面的從新加載或跳轉，而是利用 JavaScript 動態的變換 HTML（採用的是 div 切換顯示和隱藏），從而實現UI與用戶的交互。在 SPA 應用中，應用加載以後就不會再有整頁刷新。相反，展現邏輯預先加載，並有賴於內容Region（區域）中的視圖切換來展現內容。

要實現單頁面應用，如今已經有不少現成的框架了，它們都是很全面的開發平臺，爲單頁面應用開發提供了必需的頁面模板、路徑解析和處理、後臺服務 api 訪問、 DOM 操做等功能。

1. 優勢

1) 有良好的交互體驗
能提高頁面切換體驗，用戶在訪問應用頁面是不會頻繁的去切換瀏覽頁面，從而避免了頁面的從新加載；
2) 先後端分離開發
單頁Web應用能夠和 RESTful 規約一塊兒使用，經過 REST API 提供接口數據，並使用 Ajax 異步獲取，這樣有助於分離客戶端和服務器端工做。更進一步，能夠在客戶端也能夠分解爲靜態頁面和頁面交互兩個部分；
3) 減輕服務器壓力
服務器只用出數據就能夠，不用管展現邏輯和頁面合成，吞吐能力會提升幾倍；
4) 共用一套後端程序代碼
不用修改後端程序代碼就能夠同時用於 Web 界面、手機、平板等多種客戶端；

2. 缺點：

1) SEO難度較高
因爲全部的內容都在一個頁面中動態替換顯示，因此在SEO上其有着自然的弱勢，因此若是你的站點對SEO很看重，且要用單頁應用，那麼就作些靜態頁面給搜索引擎用吧；
2) 前進、後退管理
因爲單頁Web應用在一個頁面中顯示全部的內容，因此不能使用瀏覽器的前進後退功能，全部的頁面切換須要本身創建堆棧管理，固然此問題也有解決方案，好比利用URI中的散列+iframe實現；
3) 初次加載耗時多
爲實現單頁Web應用功能及顯示效果，須要在加載頁面的時候將JavaScript、CSS統一加載，部分頁面能夠在須要的時候加載。因此必須對JavaScript及CSS代碼進行合併壓縮處理；

3. 性能優化

1) 加載優化
在SPA中，一般一開始就會加載全部必需的代碼（HTML，JavaScript和CSS），有時候考慮到首屏加載太慢會按需加載，按需加載就是按照當前呈現的不一樣頁面加載不一樣的文件，而不是最開始就把全部文件都加載出來，從而避免首屏加載很慢。
當首屏加載完畢後，設備&網絡處於空閒狀態，能夠對其餘路由組件進行預加載，以便提高頁面切換性能。
根據路由拆分減小初始加載體積,利用異步加載方式，在路由註冊時提供異步拉取組件的方法，僅在須要進入對應路由時，對應組件纔會被加載進來。 

• 初次加載的速度

單頁應用的第一頁加載會比基於服務器的應用慢。這是由於首次加載必須先拿到框架和應用程序的代碼，再在瀏覽器中呈現所需的視圖。基於服務器的應用程序只需將所需的HTML推送到瀏覽器，從而減小了延遲和下載用時。

• 加快頁面加載速度

有一些方法能夠加快單頁應用的初次加載速度，好比採用多項緩存措施、須要時再加載某些模塊（懶加載）。

• 頁面生命週期

單頁應用在初始頁面加載時被徹底加載，而後頁面區域被替換或更新爲按需從服務器加載的新頁面片斷。爲避免過分下載未使用的功能，單頁應用一般會逐漸下載更多內容，如所須要的功能、頁面的一小塊，或者完整的一頁。

2) SEO優化
因爲咱們在處理單頁應用的時候頁面是不刷新的，因此會致使咱們的網頁記錄和內容很難被搜索引擎抓取到。搜索引擎抓取頁面首先要遵循http協議，但是#不是協議內的內容。而實際上也是這樣，咱們沒有見過搜索引擎的搜索結果中，哪一條記錄能夠快速定位到網頁內的某個位置的。解決的方法是用 #!號代替#號，由於谷歌會抓取帶有#!的URL。（Google規定，若是你但願Ajax生成的內容被瀏覽引擎讀取，那麼URL中可使用"#!"(這種URL在通常頁面通常不會產生定位效果)），這樣咱們能夠解決ajax的不被搜索引擎抓取的問題。在vueJs裏面，咱們能夠看到做者就是這樣作的。
3) 前進後退功能優化
配置好路由信息，經過記錄瀏覽過的歷史路由信息，能夠很好的記錄或歷史查看過的界面，也能夠獨立寫個足跡功能實現。

4. 體驗優化

1) 構建骨架圖
SPA 首屏加載面臨較長時間白屏，骨架圖是一個完美的」緩兵之計」，至關於加載到下個界面時先把下個頁面的雛形加載出來，再加載其他的組件，作到緩衝做用，骨架圖對用戶體驗有極大的提高：

• 快速展現

配合 PWA 首屏緩存，骨架圖可實現瞬間加載&展現，首屏視覺上有衝擊性地提高；

• 穩定加載

消除頁面初始加載因屢次重繪&資源加載致使的」抖動」須要注意的是，骨架圖應儘可能保持足夠小巧與簡單，以確保不會嚴重影響頁面後續加載；

2) 頁面切換
不管如何優化性能加載，在頁面切換時候依舊須要獲取頁面數據，若處理很差，可能會在數據返回前有短暫的不友好」空白」。經過如下方式能夠很好處理這個問題：

• 切換前：

在確保組件&數據加載完畢前，可保證頁面可交互性，減小用戶阻塞感；

• 轉場動畫：

在大多數原生應用，轉場動畫屬於標配，即時組件&數據已經徹底加載，在切換至新頁面瞬間，依舊須要頁面渲染時間，這段時間可能致使頁面短暫空白或者」視覺阻塞」，經過轉場動畫時間，能夠很好地緩解這個問題，大多數頁面保證在轉場動畫完畢以後依然渲染完畢。

小結

單頁面應用不是一個新興的技術，對於不少應用場景能夠提供比傳統網站更好的用戶體驗，同時對開發效率，服務器壓力等，都有很好的表現，另外，前端的框架，包括好比AngularJS、vue.js、Backbone.js等。

• JS Native：覆蓋阿里幾乎全部產品的全新開發模式，到底有何高明之處（一）？
• JS Native：覆蓋阿里幾乎全部產品的全新開發模式，到底有何高明之處（二）？
• 如何高效操做Redis數據庫？
• 前端性能提高祕笈！