单页面模式和多页面模式的优缺点

1)多页面模式(MPA  Multi-page Application): 
    多页面跳转需要刷新所有资源,每个公共资源(js、css等)需选择性重新加载
    页面跳转:使用window.location.href = "./index.html"进行页面间的跳转;
    数据传递:可以使用path?account="123"&password=""路径携带数据传递的方式,或者localstorage、cookie等存储方式

2)单页面模式(SPA 
Single-page Application
): 


    
只有一张Web页面的应用,是一种从Web服务器加载的富客户端,单页面跳转仅刷新局部资源 ,公共资源(js、css等)仅需加载一次
    页面跳转:使用js中的append/remove或者show/hide的方式来进行页面内容的更换;
    数据传递:可通过全局变量或者参数传递,进行相关数据交互

两种模式对比:


页面模式


多页面模式(MPA 
Multi-page Application


单页面模式(SPA 
Single-page Application


页面的组成


多个完整页面,
例如page1.html、page2.html等


由一个初始页面和多个页面模块组成,
例如:index.html和page1.htnl.js、page2.html.js等


公共文件加载


跳转页面前后,js/css/img等公用文件重新加载


js/css/img等公用文件只在加载初始页面时加载,更换页面内容前后无需重新加载


页面跳转/内容更新


页面通过window.location.href =
"./index.html"跳转


通过使用js方法,append/remove或者show/hide等方式来进行页面内容的更换


页面跳转/内容更新
所需数据的传递


可以使用路径携带数据传递的方式,例如:http://index.html?account="123"&password=123456"",或者localstorage、cookie等存储方式


直接通过参数传递,或者全局变量的方式进行,因为都是在一个页面的脚本环境下


用户体验


如果单个页面加载的文件相对较大(多),页面切换加载会很慢


页面片段间切换较快,用户体验好,因为初次已经加载好相关文件。但是初次加载页面时需要调整优化,因为加载文件较多


 适用场景


适用于高度追求高度支持搜索引擎的应用


高要求的体验度,追求界面流畅的应用


 转场动画


不容易实现


容易实现


总结:
单页面模式:相对比较有优势,无论在用户体验还是页面切换的数据传递、页面切换动画,都可以有比较大的操作空间

多页面模式:比较适用于页面跳转较少,数据传递较少的项目中开发,否则使用cookie,localstorage进行数据传递,是一件很可怕而又不稳定的无奈选择

 
 

原文地址:https://www.cnblogs.com/sinres/p/10860257.html

时间: 2024-11-09 11:33:56

单页面模式和多页面模式的优缺点的相关文章

前端的单页面模式和多页面模式

一.前言 前端部分的搭建,需要考虑使用哪种模式进行页面之间的跳转交互, 而项目内的页面交互,不可避免的需要相互之间的数据共享. 这就引出了本篇博客的目的,一起来谈谈:项目前端部分的构建方式以及数据共享方式. 二.正文 (一).搭建前端部分所需要注意的问题 1)方便性   结合开发的时间需求和方便性选择适合的前端模式: 2)性能   在项目的体量比较大,或者某个页面需要加载较多文件时,会对加载页面所需时间产生影响 3)浏览器的缓存   在项目发布后如果文件(css/js/image)有更新,需要用

解决搜狗高速模式及设置页面打不开的问题DisableFeature.reg

搜狗浏览器安装问题1.安装的时候要选择自定义安装,去掉参加用户体验计划的√,否则可能安装不上.2.搜狗sogou_explorer_7.0_0111.exe,设置页面se://settings/?category=general打不开,网站高速模式打不开,兼容模式可以打开.[解决办法]运行regedit,打开HKEY_CURRENT_USER\Software\SogouExplorer,新建DWORD值键值DisableFeature=16进制2000000. 解决搜狗高速模式及设置页面打不开

前端:单页面应用和多页面应用

名词介绍: 单页面应用(SinglePage Web Application,SPA) 多页面应用(MultiPage Application,MPA) 对比分析: 组成 一个外壳页面和多个页面片段组成 多个完整页面构成 资源共用(css,js) 共用,只需在外壳部分加载 不共用,每个页面都需要加载 刷新方式 页面局部刷新或更改 整页刷新 url 模式 a.com/#/pageonea.com/#/pagetwo a.com/pageone.htmla.com/pagetwo.html 用户体验

单页面应用 VS 多页面应用

单页应用(SinglePage Application,SPA) 指只有一个主页面的应用,一开始只需加载一次 js,css 等相关资源.所有的内容都包含在主页面,对每一个功能模块组件化.单页应用跳转,就是切换相关组件,仅刷新局部资源. 多页应用(MultiPage Application,MPA) 指有多个独立的页面的应用,每个页面必须重复加载 js,css 等相关资源.多页应用跳转,需要整页资源刷新. 两者对比表格:   SPA MPA 结构 一个主页面 + 许多模块的组件 许多完整的页面 体

1.13 单用户模式 1.14 救援模式 1.15 克隆虚拟机 1.16 Linux机器相互登录

1.13 单用户模式 1.14 救援模式 1.15 克隆虚拟机 1.16 Linux机器相互登录 1.13 单用户模式 重启 reboot  .init6. shutdown -r now 这三个命令 都可以重启你的linux 关机init 0.power off 重启 按方向键 选择上面这个 按e键 编辑 进入这个grub   界面,grub 是一个启动工具,简单说就是 grub找到系统的启动盘,找到引导,启动硬盘 内核等 /sysroot 就是原系统的路径 加完之后 按ctrl + x 这是

【转】移动Web单页应用开发实践——页面结构化

1. 前言 在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用一个页面装载,也可能是按模块分为独立页面装载.在开发单页应用时第一个要处理的问题就是页面结构化,由于多个功能集中在一个页面呈现,就必然需要考虑如何实现多个视图布局?如何实现视图之间动画切换?等问题. 下面我就来讲述下手机搜狐前端团队在单页应用开发的页面结构化上做过的一些尝试与努力. 2. 页面视图

移动Web单页应用开发实践——页面结构化

1. 前言 在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用一个页面装载,也可能是按模块分为独立页面装载.在开发单页应用时第一个要处理的问题就是页面结构化,由于多个功能集中在一个页面呈现,就必然需要考虑如何实现多个视图布局?如何实现视图之间动画切换?等问题. 下面我就来讲述下手机搜狐前端团队在单页应用开发的页面结构化上做过的一些尝试与努力. 2. 页面视图

【转】表单提交及关闭当前页面并刷新数据

在DWZ文档中,对于DWZ框架Ajax无刷新表单提交处理流程描述如下: 1.       ajax表单提交给服务器 2.       服务器返回一个固定格式json结构 3.       js会调函数根据这个json数据做相应的处理 注意: DWZ框架默认的ajax表单提交都是返回json数据,告诉客户端操作是否成功,成功或失败提示信息,以及成功后的处理方式(刷新某个navTab或关闭某个navTab或navTab页面跳转). 表单提交后服务器操作失败了,客户端接收statusCode和mess

MySQL集群MGR架构for单主在线转为多主模式

本文源链接地址:https:www.93bok.com 之前已经完成了MGR集群的单主模式搭建,在生产环境中,我们有时候想改变一下MGR的模式,但是又不想停止mysql服务的正常运行和正常提供服务,本文就来说说,该怎么在不影响mysql正常提供服务的前提下,从单主模式转换为多主模式,即在线转换 注意: 多点写入会存在冲突检查,这耗损性能挺大的,官方建议采用网络分区功能,在程序端把相同的业务定位到同一节点,尽量减少冲突发生几率. 单主模式之前已经搭建过,可参考之前文章,这里直接接着单主模式继续操作