1.首先我们先看看SPA
SPA全称是single page application(单页面应用),它是一种网络应用程序(webAPP)模型。传统网站里面,不同页面的切换一般是直接从服务器加载一整个新页面,而SPA这个模型,则是通过动态的重写页面的部分与用户交互,避免了过多数据交换。即是只有一张Web页面的应用,是一种从Web服务器加载的富客户端,单页面跳转仅刷新局部资源,公共资源(js,css等)仅仅需要加载一次。常用于PC端官网、购物等网站。
常见的几个SPA框架:AngularJS React Vue.js
SPA的优点:
(1)前后端分离,分工明确、接口明确
(2)提高开发效率,减少前后端沟通成本
(3)页面之间切换很快
(4)一定程度上减少了后端服务器的压力
(5)后端程序只需要提供API,不用管客户端是web还是手机等。
缺点:
(1)首屏打开速度满,因为用户首次加载需要下载框架及代码,再渲染页面
(2)不利于SEO
2.SEO
SEO就是 Search Engine Optimization,即搜索引擎优化,SEO是通过了解搜索引擎的运作规则来调整网站,以提高该网站排名。然而,对于目前的搜索引擎而言,对于异步数据的支持还不足(即当你使用AJAX获取数据时,很难保证页面能被搜索引擎收录到),为了解决这个问题,就提出了SSR
3.SSR
SSR即是 Server-Side Rendering(服务器端渲染)。普通的SPA中,一般是将框架以及网站页面代码发送到浏览器,然后在浏览器中生成和操作DOM,(因此这是第一次访问SPA网站在同等情况下比传统的在后端生成HTML发送到浏览器要慢的原因。)实际上,也可以将SPA应用打包到服务器上,在服务器上渲染出HTML发送到浏览器上,这样的HTML页面还不具备交互能力,因此还需要与SPA框架配合,在浏览器上混合成可交互的应用程序。所以,合理运用SSR技术,不仅能一定程度上解决首屏慢的问题,还能获得更好的SEO。
SSR常用框架
React 的Next
Vue.js 的Nuxt
4.MPA
MultiPage Application,即多页面应用。
多页面跳转刷新所有资源,每个公共资源需要选择性重新加载,常用于app或客户端等。
5.SPA与MPA对比
SPA与MPA具体对比分析表
|
SPA |
MPA |
组成 |
一个外壳页面和多个页面片段 |
多个完整页面 |
资源共用 |
共用,只需外壳部分加载 |
不共用,每个页面都需要加载 |
刷新方式 |
页面局部刷新或者更改 |
整页刷新 |
url模式 |
a.com/#/pageone.html |
a.com/pageone.html |
用户体验 |
页面片段间切换快,用户体验良好 |
页面切换加载缓慢、流畅度不够、用户体验差 |
转场动画 |
容易实现 |
无法实现 |
数据传递 |
容易 |
依赖url传参、cookie、localStorage等 |
SEO |
需要单独方案,实现困难,可使用SSR优化 |
实现方法简易 |
开发成本 |
较高,常需要专业框架 |
较低,但页面重复代码多 |
维护成本 |
容易 |
复杂 |
参考资料
1. https://www.jianshu.com/p/fcb98533bc18
2.https://juejin.im/post/5a0ea4ec6fb9a0450407725c