【前端工程】单页应用与多页应用

单页应用与多页应用

单页应用与多页应用的优缺点

单页应用：首次加载单个 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 的对比

单页应用和多页应用的区别