注意這幾個網(wǎng)站的相同點(diǎn)，那就是在瀏覽器中鼻种，做了原先“應(yīng)當(dāng)”在客戶端做的事情立倍。它們的界面切換非常流暢，響應(yīng)很迅速狗唉，跟傳統(tǒng)的網(wǎng)頁明顯不一樣初烘，它們是什么呢？這就是單頁Web應(yīng)用分俯。
一肾筐、什么是單頁面應(yīng)用
單頁Web應(yīng)用（single page web application，SPA）缸剪，就是只有一張Web頁面的應(yīng)用吗铐。（使用js控制渲染來替換html跳轉(zhuǎn)）
單頁應(yīng)用程序 (SPA) 是加載單個HTML 頁面并在用戶與應(yīng)用程序交互時動態(tài)更新該頁面的Web應(yīng)用程序。
瀏覽器一開始會加載必需的HTML杏节、CSS和JavaScript抓歼，所有的操作都在這張頁面上完成，都由JavaScript來控制拢锹。
因此谣妻，對單頁面應(yīng)用來說，模塊化的開發(fā)和設(shè)計顯得相當(dāng)重要卒稳。
原理：JS會感知到url的變化蹋半，通過這一點(diǎn)，可以用js動態(tài)的將當(dāng)前頁面的內(nèi)容清除掉充坑，然后將下一個頁面的內(nèi)容掛載到當(dāng)前頁面上减江，這個時候的路由不是后端來做了，而是前端來做捻爷，判斷頁面到底是顯示哪個組件辈灼，清除不需要的，顯示需要的組件也榄。這種過程就是單頁應(yīng)用巡莹，每次跳轉(zhuǎn)的時候不需要再請求html文件了司志。
二、SPA優(yōu)缺點(diǎn)
單頁面應(yīng)用的優(yōu)缺點(diǎn)：
優(yōu)點(diǎn)：
1降宅、用戶操作體驗(yàn)好骂远，用戶不用刷新頁面，整個交互過程都是通過Ajax來操作腰根。
2激才、適合前后端分離開發(fā)，服務(wù)端提供http接口额嘿，前端請求http接口獲取數(shù)據(jù)瘸恼，使用JS進(jìn)行客戶端渲染。
缺點(diǎn)：
1册养、首頁加載慢
單頁面應(yīng)用會將js钞脂、 css打包成一個文件，在加載頁面顯示的時候加載打包文件捕儒，如果打包文件較大或者網(wǎng)速慢則用戶體驗(yàn)不好
2冰啃、SEO不友好
SEO（Search Engine Optimization）為搜索引擎優(yōu)化。它是一種利用搜索引擎的搜索規(guī)則來提高網(wǎng)站在搜索引擎排名的方法刘莹。目前各家搜索引擎對JS支持不好阎毅，所以使用單頁面應(yīng)用將大大減少搜索引擎對網(wǎng)站的收錄。
三点弯、單頁面應(yīng)用分類
1扇调、Hash模式：（也就是通過錨點(diǎn)？）
這里的 hash 就是指 url 后的 # 號以及后面的字符抢肛。比如說 "www.baidu.com/#hashhash" 狼钮，其中 "#hashhash" 就是我們期望的 hash 值。
hash 值的變化不會導(dǎo)致瀏覽器像服務(wù)器發(fā)送請求捡絮，而且hash 的改變會觸發(fā) hashChange 事件熬芜，瀏覽器的前進(jìn)后退也能對其進(jìn)行控制，所以在 H5 的 history 模式出現(xiàn)之前福稳，基本都是使用 hash 模式來實(shí)現(xiàn)前端路由涎拉。
2、History模式
在 HTML5 之前的圆，瀏覽器就已經(jīng)有了 history 對象鼓拧。但在早期的 history 中只能用于多頁面的跳轉(zhuǎn)。
在 HTML5 的規(guī)范中越妈，history 新增了以下幾個 API：
history.pushState(); // 添加新的狀態(tài)到歷史狀態(tài)棧
history.replaceState(); // 用新的狀態(tài)代替當(dāng)前狀態(tài)
history.state // 返回當(dāng)前狀態(tài)對象
history.pushState() 和 history.replaceState() 的區(qū)別?
history.pushState() 在保留現(xiàn)有歷史記錄的同時季俩，將 url 加入到歷史記錄中。
history.replaceState() 會將歷史記錄中的當(dāng)前頁面歷史替換為 url梅掠。
由于 history.pushState() 和 history.replaceState() 可以改變 url 同時酌住，不會刷新頁面店归，所以在 HTML5 中的 histroy 具備了實(shí)現(xiàn)前端路由的能力。
hash模式和history模式對比
1赂韵、hash 模式相比于 history 模式的優(yōu)點(diǎn)：
兼容性更好，可以兼容到IE8
無需服務(wù)端配合處理非單頁的url地址
2挠蛉、hash 模式相比于 history 模式的缺點(diǎn)：
看起來更丑祭示。
會導(dǎo)致錨點(diǎn)功能失效。
相同 hash 值不會觸發(fā)動作將記錄加入到歷史棧中谴古，而 pushState 則可以质涛。
引用：
https://www.cnblogs.com/ppforever/p/5126640.html
http://www.reibang.com/p/0c32c85c668b
https://juejin.im/post/5dac1d0d6fb9a04e0762e3f1
