【前端工程】單頁應用與多頁應用

單頁應用與多頁應用

單頁應用與多頁應用的優缺點

單頁應用：首次加載單個 HTML 頁面，在用戶與應用程序交互時動態更新該頁面的 web 應用程序。

多頁應用：由多個完整的 html 頁面組成，更新頁面時會從新加載頁面的全部的資源。

對比	單頁	多頁
優勢	js 渲染，局部刷新頁面，頁面切換速度快，減小請求數據，用戶體驗更好	首頁加載速度快，利於作 seo
缺點	首次加載慢、不利於 seo	每次加載頁面都須要加載全部資源，切面切換速度慢，會出現卡頓空白問題。公用模塊須要重複加載

單頁應用實現

前端路由，這裏主要分析vue-router 路由的兩種模式：hash & history

hash模式

原理是onhashchange事件。

window.addEventListener('hashchange',function(e) {     
console.log(e.oldURL); console.log(e.newURL) 
},false);

經過window.location.hash屬性獲取和設置hash值。

因爲 hash 發生變化的 url 都會被瀏覽器記錄下來，因此瀏覽器的前進後退能夠使用，儘管瀏覽器沒有請求服務器，可是頁面狀態和 url 關聯起來。後來人們稱其爲前端路由，成爲單頁應用標配。

hash 模式的特色在於 hash 出如今 url 中，可是不會被包括在 HTTP 請求中，對後端沒有影響，不會從新加載頁面。

history模式

主要利用了 HTML5 History Interface 中新增的pushState()和replaceState()，它們提供了對歷史記錄進行修改的功能。

參考資料

單頁應用和多頁應用

spa 與 mpa 的對比

單頁應用和多頁應用的區別