對(duì)SPA單頁面的理解，它的優(yōu)缺點(diǎn)分別是什么，如何實(shí)現(xiàn)SPA應(yīng)用

一、什么是SPA

1、SPA（single-page application），翻譯過來就是單頁應(yīng)用

2、SPA是一種網(wǎng)絡(luò)應(yīng)用程序或網(wǎng)站的模型，它通過動(dòng)態(tài)重寫當(dāng)前頁面來與用戶交互，這種方法避免了頁面之間切換打斷用戶體驗(yàn)在單頁應(yīng)用中，所有必要的代碼（HTML、JavaScript和CSS）都通過單個(gè)頁面的加載而檢索，或者根據(jù)需要（通常是為響應(yīng)用戶操作）動(dòng)態(tài)裝載適當(dāng)?shù)馁Y源并添加到頁面頁面在任何時(shí)間點(diǎn)都不會(huì)重新加載，也不會(huì)將控制轉(zhuǎn)移到其他頁面

3、舉個(gè)例子來講就是一個(gè)杯子，早上裝的牛奶，中午裝的是開水，晚上裝的是茶，我們發(fā)現(xiàn)，變的始終是杯子里的內(nèi)容，而杯子始終是那個(gè)杯子結(jié)構(gòu)如下圖

4、我們熟知的JS框架如react,vue,angular,ember都屬于SPA

二、SPA和MPA的區(qū)別

1、上面大家已經(jīng)對(duì)單頁面有所了解了，下面來講講多頁應(yīng)用MPA（MultiPage-page application），翻譯過來就是多頁應(yīng)用在MPA中，每個(gè)頁面都是一個(gè)主頁面，都是獨(dú)立的當(dāng)我們?cè)谠L問另一個(gè)頁面的時(shí)候，都需要重新加載html、css、js文件，公共文件則根據(jù)需求按需加載如下圖

單頁應(yīng)用與多頁應(yīng)用的區(qū)別

單頁面應(yīng)用（SPA）多頁面應(yīng)用（MPA）

組成	一個(gè)主頁面和多個(gè)頁面片段	多個(gè)主頁面
刷新方式	局部刷新	整頁刷新
url模式	哈希模式	歷史模式
SEO搜索引擎優(yōu)化	難實(shí)現(xiàn)，可使用SSR方式改善	容易實(shí)現(xiàn)
數(shù)據(jù)傳遞	容易	通過url、cookie、localStorage等傳遞
頁面切換	速度快，用戶體驗(yàn)良好	切換加載資源，速度慢，用戶體驗(yàn)差
維護(hù)成本	相對(duì)容易	相對(duì)復(fù)雜

單頁應(yīng)用優(yōu)缺點(diǎn)

1、優(yōu)點(diǎn)：

• （1）具有桌面應(yīng)用的即時(shí)性、網(wǎng)站的可移植性和可訪問性
• （2）用戶體驗(yàn)好、快，內(nèi)容的改變不需要重新加載整個(gè)頁面
• （3）良好的前后端分離，分工更明確

2、缺點(diǎn)：

• （1）不利于搜索引擎的抓取
• （2）首次渲染速度相對(duì)較慢

三、實(shí)現(xiàn)一個(gè)SPA

1、原理

• （1）監(jiān)聽地址欄中hash變化驅(qū)動(dòng)界面變化
• （2）用pushsate記錄瀏覽器的歷史，驅(qū)動(dòng)界面發(fā)送變化

2、實(shí)現(xiàn)

（1）hash 模式

核心通過監(jiān)聽url中的hash來進(jìn)行路由跳轉(zhuǎn)

// 定義 Router class Router { constructor () { this.routes = {}; // 存放路由path及callback this.currentUrl = ''; // 監(jiān)聽路由change調(diào)用相對(duì)應(yīng)的路由回調(diào) window.addEventListener('load', this.refresh, false); window.addEventListener('hashchange', this.refresh, false); } route(path, callback){ this.routes[path] = callback; } push(path) { this.routes[path] && this.routes[path]() } } // 使用 router window.miniRouter = new Router(); miniRouter.route('/', () => console.log('page1')) miniRouter.route('/page2', () => console.log('page2')) miniRouter.push('/') // page1 miniRouter.push('/page2') // page2

（2）history模式

history 模式核心借用 HTML5 history api，api 提供了豐富的 router 相關(guān)屬性先了解一個(gè)幾個(gè)相關(guān)的api

• （1）history.pushState 瀏覽器歷史紀(jì)錄添加記錄
• （2）history.replaceState修改瀏覽器歷史紀(jì)錄中當(dāng)前紀(jì)錄
• （3）history.popState 當(dāng) history 發(fā)生變化時(shí)觸發(fā)

// 定義 Router class Router { constructor () { this.routes = {}; this.listerPopState() } init(path) { history.replaceState({path: path}, null, path); this.routes[path] && this.routes[path](); } route(path, callback){ this.routes[path] = callback; } push(path) { history.pushState({path: path}, null, path); this.routes[path] && this.routes[path](); } listerPopState () { window.addEventListener('popstate' , e => { const path = e.state && e.state.path; this.routers[path] && this.routers[path]() }) } } // 使用 Router window.miniRouter = new Router(); miniRouter.route('/', ()=> console.log('page1')) miniRouter.route('/page2', ()=> console.log('page2')) // 跳轉(zhuǎn) miniRouter.push('/page2') // page2

四、題外話：如何給SPA做SEO

下面給出基于Vue的SPA如何實(shí)現(xiàn)SEO的三種方式

1、SSR服務(wù)端渲染

（1）將組件或頁面通過服務(wù)器生成html，再返回給瀏覽器，如nuxt.js

2、靜態(tài)化

目前主流的靜態(tài)化主要有兩種：
（1）一種是通過程序?qū)?dòng)態(tài)頁面抓取并保存為靜態(tài)頁面，這樣的頁面的實(shí)際存在于服務(wù)器的硬盤中
（2）另外一種是通過WEB服務(wù)器的 URL Rewrite的方式，它的原理是通過web服務(wù)器內(nèi)部模塊按一定規(guī)則將外部的URL請(qǐng)求轉(zhuǎn)化為內(nèi)部的文件地址，一句話來說就是把外部請(qǐng)求的靜態(tài)地址轉(zhuǎn)化為實(shí)際的動(dòng)態(tài)頁面地址，而靜態(tài)頁面實(shí)際是不存在的。這兩種方法都達(dá)到了實(shí)現(xiàn)URL靜態(tài)化的效果

3、使用Phantomjs針對(duì)爬蟲處理

（1）原理是通過Nginx配置，判斷訪問來源是否為爬蟲，如果是則搜索引擎的爬蟲請(qǐng)求會(huì)轉(zhuǎn)發(fā)到一個(gè)node server，再通過PhantomJS來解析完整的HTML，返回給爬蟲。下面是大致流程圖

參考文獻(xiàn)

• （1）https://segmentfault.com/a/1190000019623624
• （2）https://juejin.cn/post/6844903512107663368
• （3）https://www.cnblogs.com/constantince/p/5586851.html

總結(jié)

以上是生活随笔為你收集整理的（25）：SPA单页面的理解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。