淺談單頁應用和多頁應用——Vue.js向
多頁面
-
多頁面應用：每次頁面跳轉，后台都會返回一個新的HTML文檔，就是多頁面應用。
-
在以往傳統開發的應用（網站）大多都是多頁面應用，路由由后端來寫。
頁面跳轉=》返回HTML，優點：首屏時間快，SEO效果好，缺點是頁面切換慢。
- 首屏時間快？訪問頁面，服務器只需要返回一個HTML文件，這個過程就經歷了一個HTTP請求，請求響應回來，頁面就能被展示出來。
- SEO（搜索引擎排名）效果好？搜索引擎能識別HTML的內容，根據內容進行排名。
- 頁面切換慢：每一次切換頁面都需要發起一個HTTP請求，假設網絡較慢就會出現卡頓情況。
單頁面
-
單頁應用：用vue寫的項目是單頁應用，刷新頁面會請求一個HTML文件，切換頁面的時候，並不會發起新的請求一個HTML文件，只是頁面內容發生了變化
-
vue.js原理：JS感知URL變化，當URL發生變化后，使用JS動態把當前的頁面內容清除掉，再把下一個頁面的內容掛載到頁面上。此時的路由就不是后端來做了，而是前端來做，判斷頁面到底顯示哪一個組件，再把以前的組件清除掉使用新的組件。就不會每一次跳轉都請求HTML文件。
頁面跳轉 =》 JS渲染，優點頁面切換快，缺點首屏時間稍慢，SEO差
- 首屏時間慢？請求HTML還有JS的請求。（在此我想問：HTML里面不也有JS請求嘛？這一點是在看知乎上某個大神說的，沒明白，但我覺得HTML里的JS大多是操作DOM的，因此跟HTML文件可以理解成一個請求。而vue.js則是負責整個應用的邏輯的，所以又得另算一個邏輯請求時延。）
- 頁面切換快？頁面跳轉不需要去做HTML文件的請求，節約HTTP請求發送的時延。
- SEO差？搜索引擎只認識HTML內容不認識JS內容。單頁應用的渲染都是靠JavaScript渲染出來的。搜索引擎不好識別排名。
有上面這么多的問題，為什么當下的前端開發中還要使用VUE開發單頁應用？
- vue中還有服務器端渲染的解決方案，完美解決上述問題。