单页应用和多页应用的区别

flchp 关注2023-08-08112312322


之前一直对Bootstrap框架和Vue、react框架有什么不同点不明白,因为都是前端框架。直到看到了单页应用和多页应用才大致明白。bootstrap擅长做MPA,而react、vue等擅长做SPA。为什么手机app这样的SPA会更加流行,可能跟SPA虽然第一次加载慢一点,加载完之后就是通过ajax请求数据相应快有关。

名称解释

单页面应用:SinglePage Web Application,简称 SPA。单页应用又称 SPA(Single Page Application)指的是使用单个 HTML 完成多个页面切换和功能的应用。这些应用只有一个 html 文件作为入口,一开始只需加载一次 js,css 等相关资源。使用 js 完成页面的布局和渲染。页面展示和功能室根据路由完成的。单页应用跳转,就是切换相关组件,仅刷新局部资源。

多页面应用:MultiPage Application,简称 MPA。多页应用又称 MPA(Multi Page Application)指有多个独立的页面的应用,每个页面必须重复加载 js,css 等相关资源。多页应用跳转,需要整页资源刷新。

两者不同维度对比

html文件请求

  • SPA:第一次进入页面的时候会请求一个html文件,刷新清除一下。切换到其他组件,此时路径也相应变化,但是并没有新的html文件请求,页面内容也变化了
  • MPA:每一次页面跳转的时候,后台服务器都会给返回一个新的html文档

首屏时间

  • SPA:首屏时间慢,首屏时需要请求一次html,同时还要发送一次js请求,两次请求回来了,首屏才会展示出来
  • MPA:首屏时间快,访问页面的时候,服务器返回一个 html,页面就会展示出来,这个过程只经历了一个HTTP请求

上一篇 返回目录 下一篇