首頁(yè)技術(shù)文章正文

什么是單頁(yè)面應(yīng)用程序？單頁(yè)面程序有什么特點(diǎn)？

更新時(shí)間:2021-10-26 來(lái)源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

單頁(yè)面應(yīng)用程序（英文名：Single Page Application）簡(jiǎn)稱 SPA，顧 名思義，指的是一個(gè) Web 網(wǎng)站中只有唯一的一個(gè) HTML 頁(yè)面，所有的功能與交互都在這唯一的一個(gè)頁(yè)面內(nèi)完成。
例如資料中的這個(gè) Demo 項(xiàng)目：



單頁(yè)面應(yīng)用程序的特點(diǎn)：
單頁(yè)面應(yīng)用程序?qū)⑺械墓δ芫窒抻谝粋€(gè)web 頁(yè)面中，僅在該web 頁(yè)面初始化時(shí)加載相應(yīng)的資源（HTML、 JavaScript 和CSS）。
一旦頁(yè)面加載完成了，SPA 不會(huì)因?yàn)橛脩舻牟僮鞫M(jìn)行頁(yè)面的重新加載或跳轉(zhuǎn)。而是利用JavaScript 動(dòng)態(tài)地變換
HTML 的內(nèi)容，從而實(shí)現(xiàn)頁(yè)面與用戶的交互。
單頁(yè)面應(yīng)用程序的優(yōu)點(diǎn)和缺點(diǎn)：

SPA 單頁(yè)面應(yīng)用程序最顯著的3 個(gè)優(yōu)點(diǎn)如下：
①良好的交互體驗(yàn)
  • 單頁(yè)應(yīng)用的內(nèi)容的改變不需要重新加載整個(gè)頁(yè)面
  • 獲取數(shù)據(jù)也是通過(guò)Ajax 異步獲取
沒(méi)有頁(yè)面之間的跳轉(zhuǎn)，不會(huì)出現(xiàn)“白屏現(xiàn)象”
②良好的前后端工作分離模式
  • 后端專注于提供API 接口，更易實(shí)現(xiàn)API 接口的復(fù)用
  • 前端專注于頁(yè)面的渲染，更利于前端工程化的發(fā)展
③減輕服務(wù)器的壓力
  • 服務(wù)器只提供數(shù)據(jù)，不負(fù)責(zé)頁(yè)面的合成與邏輯的處理，吞吐能力會(huì)提高幾倍
但是任何一種技術(shù)都有自己的局限性，對(duì)于SPA 單頁(yè)面應(yīng)用程序來(lái)說(shuō)，主要的缺點(diǎn)有如下兩個(gè)：
①首屏加載慢
  • 路由懶加載
  • 代碼壓縮
  • CDN 加速
  • 網(wǎng)絡(luò)傳輸壓縮
②不利于SEO
  • SSR 服務(wù)器端渲染





猜你喜歡：

如何單獨(dú)制作移動(dòng)端頁(yè)面？單獨(dú)制作有哪些優(yōu)缺點(diǎn)？

HTML5頁(yè)面頭部信息相關(guān)標(biāo)簽是如何編輯的？

什么是自適應(yīng)式頁(yè)面？

黑馬程序員前端與移動(dòng)開(kāi)發(fā)培訓(xùn)

分享到：
在線咨詢 我要報(bào)名
和我們?cè)诰€交談！