1. 程式人生 > >SPA單頁應用的優缺點

SPA單頁應用的優缺點

單頁Web程式的出現是富客戶端發展的必然結果,但是該技術也是有些侷限性,所以採用之前需要了解清楚它的優缺點。
1、優點:
1).良好的互動體驗
使用者不需要重新重新整理頁面,獲取資料也是通過Ajax非同步獲取,頁面顯示流暢。
2).良好的前後端工作分離模式
單頁Web應用可以和RESTful規約一起使用,通過REST API提供介面資料,並使用Ajax非同步獲取,這樣有助於分離客戶端和伺服器端工作。更進一步,可以在客戶端也可以分解為靜態頁面和頁面互動兩個部分。
3).減輕伺服器壓力
伺服器只用出資料就可以,不用管展示邏輯和頁面合成,吞吐能力會提高几倍;
4).共用一套後端程式程式碼
不用修改後端程式程式碼就可以同時用於Web介面、手機、平板等多種客戶端;
2、缺點:
1).SEO難度較高
由於所有的內容都在一個頁面中動態替換顯示,所以在SEO上其有著天然的弱勢,所以如果你的站點對SEO很看重,且要用單頁應用,那麼就做些靜態頁面給搜尋引擎用吧。
2).前進、後退管理
由於單頁Web應用在一個頁面中顯示所有的內容,所以不能使用瀏覽器的前進後退功能,所有的頁面切換需要自己建立堆疊管理,當然此問題也有解決方案,比如利用URI中的雜湊+iframe實現。
3).初次載入耗時多
為實現單頁Web應用功能及顯示效果,需要在載入頁面的時候將JavaScript、CSS統一載入,部分頁面可以在需要的時候載入。所以必須對JavaScript及CSS程式碼進行合併壓縮處理,如果使用第三方庫,建議使用一些大公司的CDN,因此頻寬的消耗是必然的。

單頁應用實現原理

單頁應用是指在瀏覽器中執行的應用,在使用期間頁面不會重新載入。當點選導航時,通過雜湊監聽事件,如果雜湊發生了變化,則改變雜湊值:window.location.hash,來呼叫相應的js檔案。
相應的js檔案裡面可以放相應的資料模板,當用ajax請求並返回資料時,渲染模板,生成相應的DOM結構,再插入對應的page 的div中。
基本原理:以 hash 形式(也可以使用 History API 來處理)為例,當 url 的 hash 發生改變時,觸發 hashchange 註冊的回撥,回撥中去進行不同的操作,進行不同的內容的展示。

從效能和使用者體驗的層面來比較的話,後端路由每次訪問一個新頁面的時候都要向伺服器傳送請求,然後伺服器再響應請求,這個過程肯定會有延遲。而前端路由在訪問一個新頁面的時候僅僅是變換了一下路徑而已,沒有了網路延遲,對於使用者體驗來說會有相當大的提升。