1、路由
路由：簡而言之，就是把信息從原地址傳輸?shù)侥康牡氐幕顒?dòng)
對于我們來說就是：根據(jù)不同的URL地址展示不同的頁面
1.1、前端路由
前端路由是指通過一定的技術(shù)手段，在跳轉(zhuǎn)路由時(shí)不在向服務(wù)器發(fā)送請求，而在瀏覽器端進(jìn)行處理
通過不同的url映射到頁面不同的DOM元素，不同的URL顯示不同的頁面內(nèi)容
1.2、后端路由
改變url地址時(shí)，瀏覽器會(huì)向服務(wù)器發(fā)送請求，服務(wù)器根據(jù)這個(gè)url，返回不同的資源內(nèi)容
后端路由的特點(diǎn)就是：
1.? 前端每次跳轉(zhuǎn)到不同的url地址，都會(huì)重新訪問服務(wù)器
2.? 服務(wù)器根據(jù)前端的路由，返回不同的數(shù)據(jù)，或者HTML頁面
總結(jié)：
1：后端路由是URL地址映射到服務(wù)器上的某些資源
2：前端路由是URL地址映射到瀏覽器上的某些資源
2、單頁面應(yīng)用
在開發(fā)單頁面應(yīng)用時(shí)，會(huì)經(jīng)常使用到前端路由
單頁面的說明：
1.? 單頁面是指整個(gè)項(xiàng)目只有一個(gè)頁面，頁面顯示的內(nèi)容被抽離為一個(gè)一個(gè)小的組件
2.? 通過前端路由，讓URL地址的改變來映射到不同的組件，通過URL的改變來決定組件的顯示與否
單頁面開發(fā)的優(yōu)缺點(diǎn)：
優(yōu)點(diǎn)：用戶體驗(yàn)好
1. 單頁面只有一個(gè)頁面，在第一次加載時(shí)，就已經(jīng)將所有資源從服務(wù)器上下載
2.? 在通過前端路由切換頁面時(shí)，不是像服務(wù)器發(fā)送的請求，只是通過url決定哪些資源顯示
3.? 因?yàn)椴挥孟蚍?wù)器發(fā)送請求，所以請求/響應(yīng)造成的等待時(shí)間就會(huì)大大減少，提高了響應(yīng)速度
缺點(diǎn)：
1.? 不利于SEO優(yōu)化（單頁面只有一個(gè)頁面會(huì)被百度收錄，其他頁面都是虛擬的）
2.? 使用瀏覽器的前后退鍵的時(shí)候會(huì)重新發(fā)請求，沒有合理的利用緩存
3.??單頁面無法記住之前滾動(dòng)條的位置,無法在前進(jìn),后退的時(shí)候記住滾動(dòng)的位置
3、前端渲染
前端渲染也稱客戶端渲染
前端渲染說明：
1.? 前端渲染是指瀏覽器將頁面模板和數(shù)據(jù)進(jìn)行組合形式形成最終的HTML頁面
2.? 原理就是瀏覽器通過URL獲取服務(wù)器頁面模板，服務(wù)器并不需要消化太多資源，直接將頁面模板發(fā)送給前端
3.? 瀏覽器拿到頁面后，在解析頁面的同時(shí)，通過頁面中的ajax向后端請求數(shù)據(jù)
4.? 服務(wù)器根據(jù)前端對于數(shù)據(jù)的請求，返回給前端數(shù)據(jù)
5.? 瀏覽器拿到數(shù)據(jù)以后在和頁面模板整合，形成最終的頁面
前端渲染的好處:
1.??網(wǎng)絡(luò)傳輸數(shù)據(jù)量小,因?yàn)橐粋€(gè)完整的頁面是通過兩次請求獲取的
2.??模板在前端,因此可以通過請求不同的數(shù)據(jù)改變頁面顯示結(jié)果
3.??進(jìn)而減少后端渲染時(shí),每次請求都會(huì)返回模板解析后的結(jié)果
4.??不占用服務(wù)器資源
前端渲染的劣勢：
1.? 前端資源消耗較多，因?yàn)槟０宓慕馕龊蛿?shù)據(jù)的處理都是需要前端來處理
2.? 對于SEO優(yōu)化不是特別的友好，因?yàn)樗阉饕嬷┲氆@取的是頁面模板，沒法分析頁面的全部內(nèi)容
4、前端路由實(shí)現(xiàn)的技術(shù)
4.1? 基于hash實(shí)現(xiàn)的前端路由
在html和css的階段，就已經(jīng)使用hash來處理頁面的錨點(diǎn)，因此hash的改變，url不會(huì)向服務(wù)器發(fā)送請求，這就是用來前端路由的一種技術(shù)手段，
會(huì)發(fā)現(xiàn)頁面的路徑雖然發(fā)生改變,但是瀏覽器并未向服務(wù)器發(fā)送請求,也沒有刷新頁面。
4.1.1? hash的說明：
1.? hash就是完整的url地址（也就是說就是#后面的那一串內(nèi)容）
2.? Web服務(wù)不會(huì)解析hash，因?yàn)閔ash僅僅是客戶端的一個(gè)狀態(tài)
3.? 反而前端可以在js中通過window.location.hash來讀取到
4.? 前端在讀取到hash以后，就可以通過hash所代表的不同路徑處理頁面不同的顯示邏輯
4.1.2? hash的特點(diǎn)：
1.? hash能兼容低版本的瀏覽器
2.? hash值的改變，不會(huì)向服務(wù)器發(fā)送請求，hash改變的值，只會(huì)在瀏覽器的訪問歷史中增加記錄
3.? 因此可以通過瀏覽器的前進(jìn)，后退按鈕切換hash值
4.2? 基于HTML新增的history API實(shí)現(xiàn)的前端路由
HTML新增了history API，來操作瀏覽器的路由地址，瀏覽器會(huì)提供一個(gè)history的對象，用來保存用戶操作的歷史
4.2.1? history的說明：
1.? 因?yàn)闉g覽器窗口提供了history來保存歷史操作的url
2.? 因此使用前進(jìn)后退按鈕時(shí)，url地址會(huì)發(fā)生變化，但不會(huì)向服務(wù)器發(fā)送請求
3.? 但是history里保存的歷史記錄都是訪問過的路由
4.? 只需要一定的api ，將一些url路由添加到history歷史記錄中就可以實(shí)現(xiàn)不發(fā)送請求的路由跳轉(zhuǎn)
5.? 需借助history的API 進(jìn)行操作
4.2.2? history? API
1.? history.pushState：向history對象中添加一條歷史記錄
2.? history.replaceState：替換掉當(dāng)前的history記錄
3.? 兩個(gè)方法都接受三個(gè)參數(shù)，分別為state，title，url
4.2.3? pushState和replaceState參數(shù)
1. state用來存放將要插入的history實(shí)體的相關(guān)信息，它是一個(gè)json格式的參數(shù)
2. title就是傳入history實(shí)體的標(biāo)題
3.? url用來傳遞新的history實(shí)體的相對路徑
history提供的這兩個(gè)方法不會(huì)主動(dòng)觸發(fā)瀏覽器頁面的刷新，只是history對象包括地址欄的內(nèi)容會(huì)發(fā)生改變，當(dāng)觸發(fā)前進(jìn)后退的history事件時(shí)才會(huì)進(jìn)行相應(yīng)的響應(yīng)操作。
