前端中的单页面应用和多页面应用

最新推荐文章于 2024-05-18 08:27:55 发布
最新推荐文章于 2024-05-18 08:27:55 发布
阅读量9.5k 收藏 20
点赞数 6
文章标签： 前端 单页面应用 SPA 多页面应用 MPA

前端中的单页面应用和多页面应用

转载自：https://juejin.im/post/5a0ea4ec6fb9a0450407725c
单页面应用（SinglePage Web Application，SPA）

只有一张Web页面的应用，是一种从Web服务器加载的富客户端，单页面跳转仅刷新局部资源 ，公共资源(js、css等)仅需加载一次，常用于PC端官网、购物等网站

如图:

单页面应用结构视图

这里写图片描述
多页面应用（MultiPage Application，MPA）

多页面跳转刷新所有资源，每个公共资源(js、css等)需选择性重新加载，常用于 app 或 客户端等

如图：

多页面应用结构视图

这里写图片描述

两者具体对比分析：
这里写图片描述

wangbinXMU
关注
  • 6
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端程序员必知：单页面应用的核心
02-25
刚开始写商业代码的时候，我使用的是jQuery。使用jQuery来实现功能很容易，找到一个相应的jQuery插件，再编写相应的功能即可。对于单页面应用亦是如此，寻找一个相辅助的插件就可以了，如jQueryMobile。尽管在今天看来，jQueryMobile已经不适合于今天的多数场景了。这个主要原因是，当时的用户对于移动Web应用的理解和今天是不同的。他们觉得移动Web应用就是针对移动设备而订制的，移动设备的UI、更快的加载速度等等。而在今天，多数的移动Web应用，几乎都是单页面应用了。过去，即使我们想创建一个单页面应用，可能也没有一个合适的方案。而在今天，可选择的方案就多了（PS：参见《第四
前端单页面应用
web前端入门基础进阶教程-htmlcssjs
06-01 306
1、概念 什么是单页应用呢？单页应用的全称是 single-page application，简称 SPA，它是一种网站应用的模型，它可以动态重写当前的页面来与用户交互，而不需要重新加载整个页面。单页应用的流畅性让 Web 应用更像桌面端或 Native 应用了。相对于传统的 Web 应用，单页应用做到了前后端分离，后端只负责处理数据提供接口，页面逻辑和页面渲染都交给了前端。前端发展到现在，单页应用的使用已经很广泛，目前时兴的 React、Vue、Angular 等前端框架均采用了 SPA 原则。单页应用意
.单页面应用和多页面应用区别及优缺点
最新发布
qq_60504665的博客
05-18 323
总结来说，单页面应用和多页面应用各有其优缺点，选择哪种应用方式主要取决于项目的具体需求和团队的技术栈。在需要快速响应和良好用户体验的场景下，SPA可能是一个更好的选择；而在需要优化SEO和保证数据安全的场景下，MPA可能更合适。
前端：你要懂的单页面应用和多页面应用
weixin_34381666的博客
11-20 3174
单页面应用（SinglePage Web Application，SPA）只有一张Web页面的应用，是一种从Web服务器加载的富客户端，单页面跳转仅刷新局部资源 ，公共资源(js、css等)仅需加载一次，常用于PC端官网、购物等网站 如图: 单页面应用结构视图 多页面应用（MultiPage Application，MPA）多页面跳转刷新所有资源，每个公共资源(js、css等)需选择性重新加载，常...
web单页面应用和web多页面应用
调皮的写代码
05-29 1329
一、
服务端渲染和客户端渲染、多页应用和单页应用、后端路由和前端路由
花铛
12-22 351
任何一个技术的出现都不是凭空产生的，一定是为了解决原有技术上的痛点。
web页面与多页应用（布局之浮动）
努力学习的肥宅
07-11 286
1.使用浮动来设置二列布局利用浮动和块级元素实现的左侧宽度固定，右侧自适应宽度的布局方式 <div class="left">left</div> <div class="right">right</div> /* css */ .left { float: left; width: 100px; background-col...
多页面web应用、多页面之间的数据传递【JAVA EE学习笔记三】
weixin_43354214的博客
03-29 1185
回顾（JAVA EE学习笔记二）： 1、JSP指令 2、JSP脚本段 3、JSP表达式 4、JSP声明 目录 一、多页面web应用 二、多页面之间的数据传递 一、多页面web应用 常见的几种路径： http://localhost:8080/week004/a.jsp a.jsp /week004/a.jsp 路径有相对路径和绝对路径 **绝对路径：**带有完整URL地址 ①协议://IP:端口号...
解决vue单页面应用进入页面加载所有 js 的问题
11-19
一般在index.js中都是这么引入的组件 import from '@/pages/my' import Cart from '@/pages/cart' import Order from '@/pages/order' import TMap from '@/pages/map' import New from '@/pages/new' ...
web前端单页面应用
04-19
简单的实现一个单页面应用的搭建，是我自己学spa时的一个入手点，单页面用用可以大大的提高前端的渲染效率，降低内存占用
详解Vue使用命令行搭建单页面应用
12-07
使用命令行搭建单页面应用 我们来看一下最后完成的效果： 大纲 1. 下载 node, git, npm 2. 使用命令行安装一个项目 一、 下载工具 node, git 的下载大家可以去官网自行下载就可以了。 下面说一说安装 npm，npm 是在...
vue如何搭建多页面多系统应用
11-20
本文为大家分享了vue如何搭建多页面多系统应用，供大家参考，具体内容如下 一、多页面多系统应用 1、思路 使用Vue搭建多页应用。所有系统都在同一目录下。配置多入口多出口。每个系统之间可以链接。每个系统内依然采用Vue单页应用开发。 2、组件复用性 可以将所有的系统公共组件放到系统目录最外面，以达到组件复用。在系统内部依然将自己独立的组件封装，复用。这样可以最大限度的提高组件的复用性。 3、路由 每个系统单独进行路由配置 4、数据管理 每个系统数据仓库单独处理 5、目录结构 6、效果 在做Vue项目的时候，需要用对多个类似系统做一个集成。想过很多种方法，比如：完全单页应用，分开独立应用，
webpack多页面应用
qq_34631220的博客
02-15 1181
webpack多页面应用
web页面与多页应用（布局示例）
努力学习的肥宅
06-20 460
1.单列布局（类似微博） <!-- html --> <div class="WB_frame"> ... </div> /* css */ .WB_frame { width: 1000px; margin: 0 auto; } 2.两列布局 一则固定，另一侧填充剩余宽度 !-- html --> <div class=“w...
构建多页面应用——静态资源的处理
weixin_34242509的博客
01-01 141
在之前的系列文章中，我已经介绍了如何用webpack实现多页面应用的js，html，css的处理。今天就主要介绍如何处理静态资源，在web开发中最常见的静态资源就是图片。 图片的引用方式 而因为在web中，图片有两种主要的引入方式，第一种是<img src="...">，第二种是backgorund-image: url(.....
angularJs搭建多页面应用-angularJs路由。
蜗牛
07-07 2857
ng-app 指令定义一个 AngularJS 应用程序。         ng-model 指令把元素值（比如输入域的值）绑定到应用程序。         ng-bind 指令把应用程序数据绑定到 HTML 视图。 ng-controller 指令定义了应用程序控制器。 ng-repeat 指令用于循环输出指定次数的 HTML 元素。 ng-click 指令
怎么把前端一个页面的值传到另一个页面
m0_74331185的博客
12-06 1235
怎么把前端一个页面的值传到另一个页面
单页应用和多页应用的区别
越努力，越幸运！
09-28 4432
一、定义区分 【1.1】单页应用 单页应用又称 SPA（Single Page Application）指的是使用单个 HTML 完成多个页面切换和功能的应用。这些应用只有一个 html 文件作为入口，一开始只需加载一次 js,css 等相关资源。使用 js 完成页面的布局和渲染。页面展示和功能室根据路由完成的。单页应用跳转，就是切换相关组件，仅刷新局部资源。 【1.2】多页应用 多页应用又称 MPA（Multi Page Application）指有多个独立的页面的应用，每个页面必须重复加载 js
单页面应用和多页面应用
D_lunar的博客
05-19 2999
作为一个面向uniapp的多端开发人员，我简单的谈一谈自己对单页面应用和多页面应用的理解。 1、单页面应用 以一个简单的uniapp应用（没有使用hybrid）为例，它只有一个html页面。 打包后，其他的vue、nvue页面都会转成css文件和js文件。 运行时，首先会加载所有的css、js文件，所以首次加载速度会有点慢，之后的页面切换仅是一种append/remove的增删或者show/hide的显隐控制，因此页面切换速度快、页面间切换流畅。 除此之外，页面之间数据传递方便、转场动画可以很炫酷
如何区分单页面应用和多页面应用
06-09
单页面应用（Single Page Application，SPA）和多页面应用（Multiple Page Application，MPA）是两种常见的Web应用程序架构。区分它们可以通过以下方式： 1. 页面加载方式：SPA只有在用户首次访问应用程序时加载全部页面资源，随后的页面切换通过异步获取数据和更新视图的方式完成；而MPA每次页面切换都需要重新加载整个页面。 2. URL变化：SPA在页面切换时不会改变URL，而是通过改变浏览器的history状态来模拟URL的变化；而MPA每个页面都有一个唯一的URL。 3. 前后端通信：SPA通常使用AJAX和RESTful API与后端进行数据交互，而MPA则是通过表单提交和页面跳转的方式进行通信。 4. 技术栈：SPA通常使用现代前端框架（如React、Vue、Angular等）和前端路由库（如React Router、Vue Router等）进行开发；而MPA则使用传统的HTML、CSS和JavaScript进行开发。 总的来说，SPA和MPA各有优缺点，选择哪种架构取决于具体的业务需求和开发团队的技术水平。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值