這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 一、什麼是SPA SPA(single-page application),翻譯過來就是單頁應用SPA是一種網路應用程式或網站的模型,它通過動態重寫當前頁面來與用戶交互,這種方法避免了頁面之間切換打斷用戶體驗在單頁應用中,所有必要的代碼( ...
這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助
一、什麼是SPA
SPA(single-page application),翻譯過來就是單頁應用SPA
是一種網路應用程式或網站的模型,它通過動態重寫當前頁面來與用戶交互,這種方法避免了頁面之間切換打斷用戶體驗在單頁應用中,所有必要的代碼(HTML
、JavaScript
和CSS
)都通過單個頁面的載入而檢索,或者根據需要(通常是為響應用戶操作)動態裝載適當的資源並添加到頁面頁面在任何時間點都不會重新載入,也不會將控制轉移到其他頁面舉個例子來講就是一個杯子,早上裝的牛奶,中午裝的是開水,晚上裝的是茶,我們發現,變的始終是杯子里的內容,而杯子始終是那個杯子結構如下圖
我們熟知的JS框架如react
,vue
,angular
,ember
都屬於SPA
二、SPA和MPA的區別
上面大家已經對單頁面有所瞭解了,下麵來講講多頁應用MPA(MultiPage-page application),翻譯過來就是多頁應用在MPA
中,每個頁面都是一個主頁面,都是獨立的當我們在訪問另一個頁面的時候,都需要重新載入html
、css
、js
文件,公共文件則根據需求按需載入如下圖
單頁應用與多頁應用的區別
單頁應用優缺點
優點:
- 具有桌面應用的即時性、網站的可移植性和可訪問性
- 用戶體驗好、快,內容的改變不需要重新載入整個頁面
- 良好的前後端分離,分工更明確
缺點:
- 不利於搜索引擎的抓取
- 首次渲染速度相對較慢
三、實現一個SPA
原理
- 監聽地址欄中
hash
變化驅動界面變化 - 用
pushsate
記錄瀏覽器的歷史,驅動界面發送變化
實現
hash
模式
核心通過監聽url
中的hash
來進行路由跳轉
// 定義 Router class Router { constructor () { this.routes = {}; // 存放路由path及callback this.currentUrl = ''; // 監聽路由change調用相對應的路由回調 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
history模式
history
模式核心借用 HTML5 history api
,api
提供了豐富的 router
相關屬性先瞭解一個幾個相關的api
history.pushState
瀏覽器歷史紀錄添加記錄history.replaceState
修改瀏覽器歷史紀錄中當前紀錄history.popState
當history
發生變化時觸發
// 定義 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')) // 跳轉 miniRouter.push('/page2') // page2
四、題外話:如何給SPA做SEO
下麵給出基於Vue
的SPA
如何實現SEO
的三種方式
- SSR服務端渲染
將組件或頁面通過伺服器生成html,再返回給瀏覽器,如nuxt.js
- 靜態化
目前主流的靜態化主要有兩種:(1)一種是通過程式將動態頁面抓取並保存為靜態頁面,這樣的頁面的實際存在於伺服器的硬碟中(2)另外一種是通過WEB伺服器的 URL Rewrite
的方式,它的原理是通過web伺服器內部模塊按一定規則將外部的URL請求轉化為內部的文件地址,一句話來說就是把外部請求的靜態地址轉化為實際的動態頁面地址,而靜態頁面實際是不存在的。這兩種方法都達到了實現URL靜態化的效果
- 使用
Phantomjs
針對爬蟲處理
原理是通過Nginx
配置,判斷訪問來源是否為爬蟲,如果是則搜索引擎的爬蟲請求會轉發到一個node server
,再通過PhantomJS
來解析完整的HTML
,返回給爬蟲。下麵是大致流程圖
參考文獻
- https://segmentfault.com/a/1190000019623624
- https://juejin.cn/post/6844903512107663368
- https://www.cnblogs.com/constantince/p/5586851.html