路由 先後端渲染 url hash 和 html5 history

路由

• 路由（routing）就是經過互聯的網絡把信息從源地址傳輸到目的地址的活動

• 路由器提供了兩種機制：路由和傳送

  • 路由是決定數據包從來源到目的地的途徑
  • 轉送將輸入端的數據轉移到合適的輸出端

• 路由中有一個很是重要的概念叫路由表

  • 路由表本質上就是一個映射表，決定了數據包的指向

• 後端路由階段

  • 後端處理URL和頁面之間的映射關係
  • 每一個頁面有本身對應的網址，就是URL
  • URL發送到服務器，服務器會經過正則對該URL進行匹配，而且最後交給一個Controller進行處理
  • Controller進行各類處理，最終生成HTML或者數據，返回給前端
  • 這就完成一個IO操做

• 先後端分離階段

  • 隨着AJAX出現，有了先後端分離的開發模式
  • 後端只提供API來返回數據，前端經過AJAX獲取數據，而且能夠經過JavaSCRIPT將數據渲染到頁面上
  • 這樣作最大的優勢就是先後端責任明晰，後端專一於數據，前端專一於交互和可視化上
  • 而且當移動端出現後，後端不須要進行任何處理，依然使用以前的一套API便可

前端渲染

• SPA頁面

  • 單頁面富應用，整個網頁只有一個html頁面
• 瀏覽器中顯示的網頁中的大部份內容，都是由前端寫的js代碼，在瀏覽器中執行，最終渲染出來的網頁
• 好處：網絡傳輸數據量小。不佔用服務端運算資源（解析模板），模板在前端（頗有可能僅部分在前端），改結構變交互都前端本身來了，改完本身調就行。
• 壞處：前端耗時較多，對前端工做人員水平要求相對較高。前端代碼較多，由於部分之前在後臺處理的交互邏輯交給了前端處理。佔用少部分客戶端運算資源用於解析模板。

後端渲染

• 服務器直接生產渲染好對應的HTML頁面, 返回給客戶端進行展現。
• 好處：前端耗時少，即減小了首屏時間，模板統一在後端。前端（相對）省事，不佔用客戶端運算資源（解析模板）
• 壞處：佔用服務器資源。

url的hash和html5的history

• URL的hash

  • URL的hash也就是錨點（#），本質上是改變window.location的href屬性
  • 咱們能夠經過直接賦值location.hash來改變href，可是頁面不發生刷新
  • location.hash = 'aaa'

• HTML5的history

  • history.pushState({}, .. , 'sss') //可返回
  • history.replaceState({},'','111') //不可返回
  • history.go(-1) = history.back
  • history.forward() = history.go(1)