单页面应用与多页面应用

在了解React、Vue、Angluar区别的过程中接触到了SPA与MPA的概念,所以先整理了解一下!毕竟自己写出来知识输出,有助于更好地了解记忆~嘻嘻!

单页面应用(SPA)与多页面应用(MPA)

  • 单页面应用(SinglePage Web Application,SPA)
    • 介绍
    • 缺点
  • 多页面应用(MultiPage Application,MPA)
    • 介绍
  • 区别

单页面应用(SinglePage Web Application,SPA)

介绍

只有一张Web页面的应用,它是一种从web服务器加载的富客户端,单页面的跳转只需要局部刷新页面,公共的资源也只需要加载一次即可。
适用于追求整体功能流畅的应用。

缺点

  1. 因为应用的公共资源在第一次进入时加载,所以初次加载的资源较多,速度较慢,但是后续的用户体验会较好。
  2. 因为是单页面,其实在页面的跳转过程中已经是HTML+JavaScript的结了,SEO不能执行JavaScript的代码,不利于SEO抓取各个页面的信息。
    解决方案:Prerender预渲染优化SEO
    原理:在页面重新渲染完成之后,把数据返回给爬虫工具

多页面应用(MultiPage Application,MPA)

介绍

有多张web页面的应用,每次跳转都需要选择性加载页面所需的公共资源。
适用于追求首页效果的应用。

区别

有一张图较为清晰地对比了两者

参考博客以及图片来源
单页面应用与多页面应用_第1张图片

你可能感兴趣的:(前端)