淺談單頁應用和多頁應用——Vue.js向

淺談單頁應用和多頁應用——Vue.js向

多頁面

1. 多頁面應用：每次頁面跳轉，後臺都會返回一個新的HTML文檔，就是多頁面應用。

2. 在以往傳統開發的應用（網站）大多都是多頁面應用，路由由後端來寫。

頁面跳轉=》返回HTML，優勢：首屏時間快，SEO效果好，缺點是頁面切換慢。

• 首屏時間快？訪問頁面，服務器只須要返回一個HTML文件，這個過程就經歷了一個HTTP請求，請求響應回來，頁面就能被展現出來。
• SEO（搜索引擎排名）效果好？搜索引擎能識別HTML的內容，根據內容進行排名。
• 頁面切換慢：每一次切換頁面都須要發起一個HTTP請求，假設網絡較慢就會出現卡頓狀況。

單頁面

1. 單頁應用：用vue寫的項目是單頁應用，刷新頁面會請求一個HTML文件，切換頁面的時候，並不會發起新的請求一個HTML文件，只是頁面內容發生了變化

2. 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中還有服務器端渲染的解決方案，完美解決上述問題。