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

单页应用与多页应用

单页应用：首次加载单个 HTML 页面，在用户与应用程序交互时动态更新该页面的 web 应用程序。

多页应用：由多个完整的 html 页面组成，更新页面时会重新加载页面的所有的资源。

对比	单页	多页
优点	js 渲染，局部刷新页面，页面切换速度快，减少请求数据，用户体验更好	首页加载速度快，利于做 seo
缺点	首次加载慢、不利于 seo	每次加载页面都需要加载所有资源，切面切换速度慢，会出现卡顿空白问题。公用模块需要重复加载

前端路由，这里主要分析vue-router 路由的两种模式：hash & history

原理是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 请求中，对后端没有影响，不会重新加载页面。

主要利用了 HTML5 History Interface 中新增的pushState()和replaceState()，它们提供了对历史记录进行修改的功能。