SPA单页面的优缺点以及与多页面的区别

Source

单页面应用(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等传递

页面切换

速度快、用户体验良好

切换加载资源,速度慢,用户体验差

维护成本

相对容易

相对复杂