前端路由和後端路由,前端渲染和後端渲染
1.vue-router和koa-router的區別
vue-router是前端路由,koa-router是後端路由。
前端路由
定義:在單頁面應用,大部分頁面結構不變,只改變部分內容的使用
優點:使用者體驗好,不需要每次都從伺服器全部獲取,快速展現給使用者
缺點:
使用瀏覽器的前進,後退鍵的時候會重新發送請求,沒有合理地利用快取
單頁面無法記住之前滾動的位置,無法在前進,後退的時候記住滾動的位置
後端路由
定義:通過使用者請求的url導航到具體的html頁面;每跳轉到不同的URL,都是重新訪問服務端,然後服務端返回頁面,頁面也可以是服務端獲取資料,然後和模板組合,返回HTML
對比
1.從效能和使用者體驗的層面來比較的話,後端路由每次訪問一個新頁面的時候都要向伺服器傳送請求,然後伺服器再響應請求,這個過程肯定會有延遲。而前端路由在訪問一個新頁面的時候僅僅是變換了一下路徑而已,沒有了網路延遲,對於使用者體驗來說會有相當大的提升。
2.在某些場合中,用ajax請求,可以讓頁面無重新整理,頁面變了但Url沒有變化,使用者就不能複製到想要的地址,用前端路由做單頁面網頁就很好的解決了這個問題。但是前端路由使用瀏覽器的前進,後退鍵的時候會重新發送請求,沒有合理地利用快取。
vue-router前端路由原理
前端路由主要模式:hash模式和history模式
而在vue-router中,它提供mode引數來決定採用哪一種方式,選擇流程如下:
預設Hash-->如果瀏覽器支援History新特性改用History-->如果不在瀏覽器環境則使用abstract
選好mode後建立history物件(HashHistory或HTML5History或AbstractHistory)
可見最被青睞的是History模式,理由是: "#"太醜了。。
前端渲染:
定義:指的是後端返回JSON資料,前端利用預先寫的html模板,迴圈讀取JSON資料,拼接字串(es6的模板字串特性大大減少了拼接字串的的成本),並插入頁面。
好處:網路傳輸資料量小。不佔用服務端運算資源(解析模板),模板在前端(很有可能僅部分在前端),改結構變互動都前端自己來了,改完自己調就行。
壞處:前端耗時較多,對前端工作人員水平要求相對較高。前端程式碼較多,因為部分以前在後臺處理的互動邏輯交給了前端處理。佔用少部分客戶端運算資源用於解析模板。
後端渲染:
定義:前端請求,後端用後臺模板引擎直接生成html,前端接受到資料之後,直接插入頁面。
好處:前端耗時少,即減少了首屏時間,模板統一在後端。前端(相對)省事,不佔用客戶端運算資源(解析模板)
壞處:佔用伺服器資源。