前端路由和後端路由,前端渲染和後端渲染

2021-09-01 08:37:40 字數 1613 閱讀 7005

vue-router是前端路由,koa-router是後端路由。

定義:在單頁面應用,大部分頁面結構不變,只改變部分內容的使用

優點:使用者體驗好,不需要每次都從伺服器全部獲取,快速展現給使用者

缺點

使用瀏覽器的前進,後退鍵的時候會重新傳送請求,沒有合理地利用快取

單頁面無法記住之前滾動的位置,無法在前進,後退的時候記住滾動的位置

定義:通過使用者請求的url導航到具體的html頁面;每跳轉到不同的url,都是重新訪問服務端,然後服務端返回頁面,頁面也可以是服務端獲取資料,然後和模板組合,返回html,也可以是直接返回模板html,然後由前端js再去請求資料,使用前端模板和資料進行組合,生成想要的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,前端接受到資料之後,直接插入頁面。

好處:前端耗時少,即減少了首屏時間,模板統一在後端。前端(相對)省事,不占用客戶端運算資源(解析模板)

壞處:占用伺服器資源。

前端路由和後端路由

參考文章 前端路由 1,什麼是前端路由?路由是根據不同的 url 位址展示不同的內容或頁面 前端路由就是把不同路由對應不同的內容或頁面的任務交給前端來做,之前是通過服務端根據 url 的不同返回不同的頁面實現的。2,什麼時候使用前端路由?在單頁面應用,大部分頁面結構不變,只改變部分內容的使用 3,前...

前端路由和後端路由

前端路由 對於單頁面應用程式來說,主要通過url中的hash 號 來實現不同頁面之間的切換,同時,hash有乙個特點 http請求中不會包含hash相關的內容 所以,單頁面程式中的頁面跳轉主要用hash實現 不會涉及到頁面重新整理,只是切換元件 在單頁面應用程式中,這種通過hash改變來切換頁面的方...

前端路由和後端路由

定義 在單頁面應用,大部分頁面結構不變,只改變部分內容的使用 優點 使用者體驗好,和後台網速沒有關係,不需要每次都從伺服器全部獲取,快速展現給使用者 可以再瀏覽器中輸入指定想要訪問的url路徑位址。實現了前後端的分離,方便開發。有很多框架都帶有路由功能模組。缺點 使用瀏覽器的前進,後退鍵的時候會重新...