SPA（single-page application），翻譯過來就是單頁應用<code>SPA</code>是一種網絡應用程式或網站的模型，它通過動态重寫目前頁面來與使用者互動，這種方法避免了頁面之間切換打斷使用者體驗在單頁應用中，所有必要的代碼（<code>HTML</code>、<code>JavaScript</code>和<code>CSS</code>）都通過單個頁面的加載而檢索，或者根據需要（通常是為響應使用者操作）動态裝載适當的資源并添加到頁面頁面在任何時間點都不會重新加載，也不會将控制轉移到其他頁面舉個例子來講就是一個杯子，早上裝的牛奶，中午裝的是開水，晚上裝的是茶，我們發現，變的始終是杯子裡的内容，而杯子始終是那個杯子結構如下圖
我們熟知的JS架構如<code>react</code>,<code>vue</code>,<code>angular</code>,<code>ember</code>都屬于<code>SPA</code>
上面大家已經對單頁面有所了解了，下面來講講多頁應用MPA（MultiPage-page application），翻譯過來就是多頁應用在<code>MPA</code>中，每個頁面都是一個首頁面，都是獨立的當我們在通路另一個頁面的時候，都需要重新加載<code>html</code>、<code>css</code>、<code>js</code>檔案，公共檔案則根據需求按需加載如下圖
<col>
單頁面應用（SPA）
多頁面應用（MPA）
組成
一個首頁面和多個頁面片段
多個首頁面
重新整理方式
局部重新整理
整頁重新整理
url模式
哈希模式
曆史模式
SEO搜尋引擎優化
難實作，可使用SSR方式改善
容易實作
資料傳遞
容易
通過url、cookie、localStorage等傳遞
頁面切換
速度快，使用者體驗良好
切換加載資源，速度慢，使用者體驗差
維護成本
相對容易
相對複雜
優點：
具有桌面應用的即時性、網站的可移植性和可通路性
使用者體驗好、快，内容的改變不需要重新加載整個頁面
良好的前後端分離，分工更明确
缺點：
不利于搜尋引擎的抓取
首次渲染速度相對較慢
監聽位址欄中<code>hash</code>變化驅動界面變化
用<code>pushsate</code>記錄浏覽器的曆史，驅動界面發送變化
核心通過監聽<code>url</code>中的<code>hash</code>來進行路由跳轉
<code>history</code> 模式核心借用 <code>HTML5 history api</code>，<code>api</code> 提供了豐富的 <code>router</code> 相關屬性先了解一個幾個相關的api
<code>history.pushState</code> 浏覽器曆史紀錄添加記錄
<code>history.replaceState</code>修改浏覽器曆史紀錄中目前紀錄
<code>history.popState</code> 當 <code>history</code> 發生變化時觸發
// 定義 Router class Router {
constructor () {
this.routes = {};
this.listerPopState()
}
init(path) {
history.replaceState({path: path}, null, path);
this.routes[path] && this.routes[path]();
route(path, callback){
this.routes[path] = callback;
push(path) {
history.pushState({path: path}, null, path);
listerPopState () {
window.addEventListener('popstate' , e => {
const path = e.state && e.state.path;
this.routers[path] && this.routers[path]()
})
// 使用 Router
window.miniRouter = new Router();
miniRouter.route('/', ()=> console.log('page1'))
miniRouter.route('/page2', ()=> console.log('page2'))
// 跳轉
miniRouter.push('/page2') // page2
四、如何給SPA做SEO下面給出基于<code>Vue</code>的<code>SPA</code>如何實作<code>SEO</code>的三種方式
SSR服務端渲染
将元件或頁面通過伺服器生成html，再傳回給浏覽器，如<code>nuxt.js</code>
靜态化
目前主流的靜态化主要有兩種：（1）一種是通過程式将動态頁面抓取并儲存為靜态頁面，這樣的頁面的實際存在于伺服器的硬碟中（2）另外一種是通過WEB伺服器的 <code>URL Rewrite</code>的方式，它的原理是通過web伺服器内部子產品按一定規則将外部的URL請求轉化為内部的檔案位址，一句話來說就是把外部請求的靜态位址轉化為實際的動态頁面位址，而靜态頁面實際是不存在的。這兩種方法都達到了實作URL靜态化的效果
使用<code>Phantomjs</code>針對爬蟲處理
原理是通過<code>Nginx</code>配置，判斷通路來源是否為爬蟲，如果是則搜尋引擎的爬蟲請求會轉發到一個<code>node server</code>，再通過<code>PhantomJS</code>來解析完整的<code>HTML</code>，傳回給爬蟲。下面是大緻流程圖
真正的大師，永遠都懷着一顆學徒的心