SPA單頁應用的優缺點
阿新 • • 發佈:2020-09-01
SPA單頁應用的優缺點
Single Page Web Application
是一種特殊的Web
應用,其所有的活動侷限於一個Web
頁面中,僅在該Web
頁面初始化時載入相應的HTML
、JavaScript
、CSS
檔案,一旦頁面載入完成,SPA
不會進行頁面的重新載入或跳轉,而是利用JavaScript
動態的變換HTML
,預設Hash
模式是採用錨點實現路由以及元素元件的顯示與隱藏實現互動,簡單來說SPA
應用只有一個頁面,通常多頁面應用會有多個頁面不斷跳轉,而單頁面應用始終在一個頁面中,,預設Hash
模式是通過錨點實現路由以及控制組件的顯示與隱藏來實現類似於頁面跳轉的互動。
優點
- 良好的互動體驗,頁面首次載入完成後內容的改變不需要重新載入整個頁面,具有更快的響應速度,具有桌面應用的即時性、網站的可移植性和可訪問性。
- 良好的前後端工作分離模式,單頁應用可以和
RESTful
架構一起使用,通過RESTAPI
提供介面資料,有助於分離客戶端和伺服器端工作與API
通用化。 - 減輕服務端壓力,服務端不需要處理頁面模板的邏輯與拼接,除首次載入頁面外只需要提供資料資訊即可,把計算儘量放在客戶端,單頁應用能提高單位伺服器的負載量。
- 可維護性高,通常採用元件化與模組化開發,程式碼複用程度高,相對來說可維護性高。
缺點
- 不利於
SEO
,由於是採用前端渲染的方式,搜尋引擎不會去解析Js
從而只能夠抓取首頁未渲染的模板,如果需要單頁面應用有更好的SEO
,那麼通常需要使用SSR
服務端渲染,搜尋引擎爬蟲抓取工具可以直接檢視完全渲染的頁面,但是由於是服務端進行渲染,那麼會對伺服器造成一定壓力,SSR
CPU
密集型,當然如果只是需要SEO
少數幾個頁面,可以採用預渲染的方式。 - 首次載入速度慢,
SPA
單頁應用通常首次載入頁面時就會將相應的HTML
、JavaScript
、CSS
檔案全部載入,通常可以通過採取快取措施以及懶載入即按需載入元件的方式來優化。
每日一題
https://github.com/WindrunnerMax/EveryDay
參考
https://www.jianshu.com/p/9258583ef4ab https://juejin.im/post/6844903512107663368 https://blog.csdn.net/huangpb123/article/details/86183453