共计 690 个字符，预计需要花费 2 分钟才能阅读完成。
单页应用与多页应用
单页应用与多页应用的优缺点
单页应用：首次加载单个 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 的对比
单页应用和多页应用的区别
正文完