【前端词典】一文读懂单页应用和多页应用的区别

前言

最近看到一些人在问单页面和多页面应用的区别。由于最近在整理 Vue 相关的内容，因此也就输出这一篇短文但愿能够给你一个总体的认识。

这里也会大致介绍单页应用实现的核心 —— 前端路由。

单页应用 VS 多页应用

直观对比图

单页应用（ SinglePage Application，SPA ）

指只有一个主页面的应用，一开始只需加载一次 js, css 等相关资源。全部的内容都包含在主页面，对每个功能模块组件化。单页应用跳转，就是切换相关组件，仅刷新局部资源。

多页应用（ MultiPage Application，MPA ）

指有多个独立的页面的应用，每一个页面必须重复加载 js, css 等相关资源。多页应用跳转，须要整页资源刷新。

二者对比表格：

对比项 \ 模式	SPA	MPA
结构	一个主页面 + 许多模块的组件	许多完整的页面
体验	页面切换快，体验佳；当初次加载文件过多时，须要作相关的调优。	页面切换慢，网速慢的时候，体验尤为很差
资源文件	组件公用的资源只须要加载一次	每一个页面都要本身加载公用的资源
适用场景	对体验度和流畅度有较高要求的应用，不利于 SEO（可借助 SSR 优化 SEO）	适用于对 SEO 要求较高的应用
过渡动画	Vue 提供了 transition 的封装组件，容易实现	很难实现
内容更新	相关组件的切换，即局部更新	总体 HTML 的切换，费钱（重复 HTTP 请求）
路由模式	可使用 hash ，也可使用 history	普通连接跳转
数据传递	由于单页面，使用全局变量就好（Vuex）	cookie 、localStorage 等缓存方案，URL 参数，调用接口保存等
相关成本	前期开发成本较高，后期维护较为容易	前期开发成本低，后期维护就比较麻烦，由于可能一个功能须要改不少地方

单页应用实现 —— 前端路由

前端路由的核心：改变视图的同时不会向后端发出请求。

这里我讲讲 vue-router 路由的两种模式：hash & history

hash 模式

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()，它们提供了对历史记录进行修改的功能。

相关的 API:

history.pushState()

history.pushState(stateObj, title, url);
复制代码

1. state：一个与指定网址相关的状态对象，popstate 事件触发时，该对象会传入回调函数。若是不须要可填 null。
2. title：新页面的标题，可是全部浏览器目前都忽略这个值，可填 null。
3. url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

例如：history.pushState('new', 'new', 'new.html');

添加上面这个新记录后，浏览器地址栏马上显示 ~/new.html，但并不会跳转到 new.html，它只是成为 history 中的最新记录。pushState 方法不会触发页面刷新，只是 history 对象变化，地址栏会变。

history.replaceState()

history.replaceState(stateObj, title, url);
复制代码

参数同 pushState() 同样。

调用该方法，会修改当前的 history 对象记录，history.length 的长度不会改变

history.state

当前 URL 下对应的状态信息。若是当前 URL 不是经过 pushState 或者 replaceState 产生的，那么 history.state是 null。 当须要 state 和 URL 同步时可使用 replaceState() 使之同步。

popstate 事件

同一个文档的 history 对象出现变化时，就会触发 popstate 事件。

不一样的浏览器在加载页面时处理 popstate 事件的形式存在差别。页面加载时 Chrome 和 Safari 一般会触发 popstate 事件，但 Firefox 则不会。

注意：

调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件. popstate 事件只会在浏览器某些行为下触发, 好比点击后退、前进按钮(或者调用 history.back()、history.forward()、history.go()方法)。

Vue 相关文章输出计划

最近总有朋友问我 Vue 相关的问题，所以接下来我会输出 10 篇 Vue 相关的文章，但愿对你们有必定的帮助。我会保持在 7 到 10 天更新一篇。

1. Vuex 注入 Vue 生命周期的过程（完成）
2. 学习 Vue 源码的必要知识储备（完成）
3. 浅析 Vue 响应式原理（完成）
4. 新老 VNode 进行 patch 的过程
5. 如何开发功能组件并上传 npm
6. 从这几个方面优化你的 Vue 项目
7. 从 Vue-Router 设计讲前端路由发展
8. 在项目中如何正确的使用 Webpack
9. Vue 服务端渲染
10. Axios 与 Fetch 该如何选择

建议你关注个人公众号，第一时间就能够接收最新的文章。

若是你想加群交流，能够扫码自动拉你入群：