单页面应用这个概念，是随着AngularJS、React、Vue 等这些框架的出现而出现的。在多页面应用中，你每次跳转，服务器都会返回一个HTML文件，而单页面应用不会，每次点击跳转链接，单页面应用使用了页面的局部刷新的能力。
一、多页面应用
多页面跳转刷新所有资源，每个公共资源(js、css等)需选择性重新加载。
应用场景
常用于 app 或 客户端等
优缺点
优点：首屏时间快，SEO效果好。
缺点：页面切换慢。
二、单页面应用
只有一张Web页面的应用，是一种从Web服务器加载的富客户端，单页面跳转仅刷新局部资源 ，公共资源(js、css等)仅需加载一次。页面渲染是通过JS动态渲染来实现的。
应用场景
常用于PC端官网、购物等网站
优缺点
优点：页面切换快
。 缺点：首屏时间稍慢，SEO差。
在Vue中提供了一些其它的技术，比如服务器端渲染的技术，通过这些技术可以完美解决掉单页面应用中的问题。因此对前端来说，单页面应用是一个非常完美的页面开发解决方案。
三、对比
单页面应用和多页面应用的其他区别可参考以下表格：
| 单页面应用 | 多页面应用 | |
| 组成 | 一个外壳页面和多个页面片段组成 | 多个完整页面构成 |
| 资源共用(css,js) | 共用，只需在外壳部分加载 | 不共用，每个页面都需要加载 |
| 刷新方式 | 页面局部刷新或更改 | 整页刷新 |
| url 模式 | a.com/#/pageone a.com/#/pagetwo | a.com/pageone.html a.com/pagetwo.html |
| 用户体验 | 页面片段间的切换快，用户体验良好 | 页面切换加载缓慢，流畅度不够，用户体验比较差 |
| 页面跳转动画 | 容易实现 | 无法实现 |
| 数据传递 | 容易 | 依赖 url 传参、或者 cookie 、localStorage 等 |
| 搜索引擎优化(SEO) | 需要单独方案、实现较为困难、不利于 SEO 检索 可利用服务器端渲染(SSR)优化 | 实现方法简易 |
最后
本文介绍了单页面应用与多页面应用以及它们的区别~
如果这篇文章对你有帮助的话，麻烦点赞收藏哟~
后期更文计划
- 异步进阶及event loop的那些事儿~
- Grid布局原理及实战
- vw和vh布局或许会成为新趋势？
