单页面应用(Single Page Application, SPA),它通过动态重写当前页面来与用户交互,避免了页面之间的切换而影响用户体验。它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML、JS、CSS资源。一旦页面加载完成,SPA不会因为用户的操作而进行页面的重新加载或跳转,而是利用JS动态变化HTML从而实现交互。
目前大众所熟知的JS框架如Vue、React、Angular都属于SPA单页面应用。
优缺点:
优点
具有桌面应用的及时性、网站的可移植性和可访问性;
用户体验好,内容的改变不需要重新加载整个页面;
良好的前后端分离,分工更加明确。
减轻服务器压力,只需要提供数据即可,不用负责逻辑与页面的合成
缺点
不利于搜索引擎的抓取,所有内容都在一个页面中动态替换显示
首次渲染速度相对较慢,为实现单页Web应用功能及显示,需要在加载页面的时候将JS、CSS统一加载,部分页面可在需要时加载。 所以必须对JS及CSS代码进行合并压缩处理
SPA和MPA的区别
MPA是多页应用,每一个页面就是一个主页,相互独立
SPA |
MPA |
|
组成 |
一个主页面和多个页面片段 |
多个主页面 |
刷新方式 |
局部刷新 |
整页刷新 |
url模式 |
哈希模式 |
历史模式 |
SEO搜索引擎优化 |
难实现,可使用SSR方式改善 |
容易实现 |
数据传递 |
容易 |
通过url,cookie,localStorage等传递 |
页面切换 |
速度快、用户体验良好 |
切换加载资源,速度慢,用户体验差 |
维护成本 |
相对容易 |
相对复杂 |