单页应用（SPA）和多页应用（MPA）的区别

程序员 · 2024-9-5 03:39:16

一、简介

单页面应用：SinglePage Web Application，简称 SPA
多页面应用：MultiPage Application，简称 MPA

二、界说区分

（1）单页面应用
只有一个 WEB 主页面的应用，公共资源(js、css等)仅需加载一次，全部的内容都包罗在主页面，对每一个功能模块组件化。单页应用跳转，就是切换干系组件，仅革新局部资源。常用于PC端官网、购物等网站。

（2）多页面应用
有多个独立的页面的应用，每个公共资源(js、css等)需选择性重新加载，多页面跳转革新全部资源。常用于 app 或客户端等。

三、图说区别

（1）单页应用模型表现图：

（2）多页应用模型表现图：

四、表格对比

单页应用(SPA)多页应用(MPA)布局一个主页面 + 许多模块的组件许多完备的页面资源文件(css，js)组件公用的资源只必要加载一次每个页面都要本身加载公用的资源革新方式页面局部革新整页革新url模式a.com/#/page1a.com/page1.html用户体验页面切换快，体验佳；当初次加载文件过多时，必要做干系的调优。页面切换慢，网速慢的时候，体验尤其不好实用场景(SEO)对体验度和流通度有较高要求的应用，倒霉于 SEO（可借助 SSR 优化 SEO），实用于常常切换页面的场景和数据通报较多，多表单的场景实用于对 SEO 要求较高的应用过渡动画vue 提供了 transition 的封装组件，轻易实现很难实现内容更新干系组件的切换，即局部更新团体 HTML 的切换，费钱（重复 HTTP 哀求）路由模式可以利用 hash ，也可以利用 history平凡链接跳转数据通报由于单页面，利用全局变量就好（Vuex）cookie 、localStorage 等缓存方案，URL 参数，调用接口保存等干系资本前期开辟资本较高，后期维护较为轻易前期开辟资本低，后期维护就比力贫苦，由于可能一个功能必要改许多地方html文件哀求第一次进入页面的时候会哀求一个html文件，革新打扫一下。切换到其他组件，此时路径也相应变化，但是并没有新的html文件哀求，页面内容也变化了每一次页面跳转的时候，后台服务器都会给返回一个新的html文档首屏时间首屏时间慢，首屏时必要哀求一次html，同时还要发送一次js哀求，两次哀求返来了，首屏才会展示出来首屏时间快，访问页面的时候，服务器返回一个 html，页面就会展示出来，这个过程只履历了一个HTTP哀求原文地址：https://www.jianshu.com/p/3c3c02cfed27

单页应用（SPA）和多页应用（MPA）的区别

所属分类: 问答交流

新帖推荐: 30日

推荐作品