SPA和MPA

Single Page Applications (SPA). Learn what an SPA is, how it works, and… |  by Natasha Ferguson | Medium
SPA与MPA是什么

**SPA(Single Page Application,单页应用)**在首次加载时会下载一个单独的HTML文件,然后通过JavaScript动态加载内容,无需每次页面刷新时重新加载整个页面。**MPA(Multi-Page Application,多页应用)**是一种传统的Web应用程序架构,每个不同的页面都对应一个独立的HTML文件。用户在导航到不同页面时需要重新加载整个页面,每个页面都有自己的HTML、CSS和JavaScript。


SPA与MPA的区别

  1. 页面加载方式:SPA初次加载一个主页面,在此基础上动态更换页面内容来实现不同页面的切换,无需重新加载整个页面;MPA每次切换页面都是重新加载整个页面。
  2. 用户体验:SPA通常不会出现闪烁和白屏,用户体验较好;MPA切换新页面时可能会出现较大的延迟。
  3. SEO: SPA在SEO方面具有一些挑战,因为搜索引擎爬虫在初始加载时可能无法获取到完整的页面内容。但可以采取预渲染、服务端渲染等策略来改善SPA的SEO。MPA通常更有利于SEO,因为每个页面都有自己的HTML内容和URL,搜索引擎可以更容易地索引这些页面。
  4. 开发和维护: SPA通常需要更多的前端工程师技能,因为它们涉及到客户端路由、状态管理。MPA的开发通常更传统,更易于理解,不需要太多的前端框架。每个页面可以视为独立的实体,更容易进行维护。

SPA如何进行搜索引擎优化

  1. 服务器端渲染SSR或预渲染:SSR将在服务器上生成完整页面的HTML。预渲染则是在构建时生成页面的静态HTML版本,可以更快地加载和索引。通用应用框架Nuxt.js自带了SSR功能。

hash模式的实现

// 定义 Router  
class Router {constructor() {this.routes = {}; // 存放路由path及callback  this.currentUrl = '';// 监听路由change调用相对应的路由回调  window.addEventListener('load', this.refresh, false);window.addEventListener('hashchange', this.refresh, false);}//注册路由route(path, callback) {this.routes[path] = callback;}//路由跳转push(path) {this.routes[path] && this.routes[path]()}
}// 使用 router  
window.miniRouter = new Router();
miniRouter.route('/', () => console.log('page1'))
miniRouter.route('/page2', () => console.log('page2'))miniRouter.push('/') // page1  
miniRouter.push('/page2') // page2  

load 事件在整个页面及所有依赖资源如样式表和图片都已完成加载时触发。

hashchange事件是当 URL 的片段标识符 (跟在#符号后面的 URL 部分,包括#符号)更改时触发。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/121403.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何在IPhone 14、14 Pro和14 Pro Max上添加屏幕锁定

当你第一次获得iPhone时,系统会提示你为它创建一个密码,这样只有你才能访问它。你应该使用一个必须输入的密码,以便在iPhone 14被唤醒或打开时解锁它。这将提供更高级别的保护。当你打开数据保护时,iPhone上的数据会被加密&#x…

接口自动化测试系列-接口测试

接口测试工具-postman 利用postman完成接口测试:官网。 接口一般包含: url:请求地址,如:https://www.baidu.com/ method:请求方式,get,post,update,delete等 headers:请求头 body/params:请求体,post一般存在body中。get请求放在…

【商业案例应用】B端产品设计流程——智能客服案例

文章目录 1、项目背景介绍2、需求调研阶段3、项目立项阶段4、需求整理阶段 1、项目背景介绍 2、需求调研阶段 3、项目立项阶段 4、需求整理阶段

用idea查看sqlite数据库idea sqlite

1、安装Database Navigator插件 2、导入数据库并查看 3、删除数据库连接 在此做个笔记

软件测试|Python自动化测试实现的思路

Python自动化测试常用于Web应用、移动应用、桌面应用等的测试 Python自动化实现思路通常分为以下几步: 1. 确定自动化测试的范围和目标: 首先需要明确需要进行自动化测试的范围和目标,包括测试场景、测试用例、测试数据等。 2. 选择自动化…

一文读懂|内核顺序锁

Linux 内核有非常多的锁机制,如:自旋锁、读写锁、信号量和 RCU 锁等。本文介绍一种和读写锁比较相似的锁机制:顺序锁(seqlock)。 顺序锁与读写锁一样,都是针对多读少写且快速处理的锁机制。而顺序锁和读写…

【【STM32-29正点原子版本串口发送传输实验】

STM32-29正点原子版本串口发送传输实验 通过串口接收或发送一个字符 例程目的 开发板上我们接入的是实现异步通信的UART接口 USB转串口原理图 我们一步步分析 PA9是串口1 的发送引脚 PA10是串口1 的接受引脚 。因为我们现在只是用到异步收发器功能,所以我们现…

Visual Studio软件_MSC_VER值(MSVC编译器版本)的获取方法

本文介绍查看Visual Studio软件_MSC_VER值的方法。 _MSC_VER是微软公司推出的C/C 编译器——MSVC编译器的一个内置宏,其值表示当前Visual Studio软件中MSVC编译器的具体版本。不同的Visual Studio软件版本对应着不同的MSVC编译器版本——无论是不同发布年份的版本&…

微信小程序 通过响应式数据控制元素class属性

我想大家照这个和我最初的目的一样 希望有和vue中v-bind:class一样方便的指令 但答案不太尽人意 这里 我们只能采用 三元运算符的形式 参考代码如下 <view class"item {{ userId item.userId ? isThisUser : }}"> </view>这里 我们判断 如果当前ite…

管理类联考——数学——汇总篇——知识点突破——数据分析——计数原理——排列组合——分堆分配

⛲️ 一、考点讲解 1.方法介绍 在排列组合中&#xff0c;经常遇到元素分堆或分组问题&#xff0c;尤其难点是出现等数量的分堆&#xff0c;很多考生容易犯错误。 2.方法应用 平均分成的组&#xff0c;不管他们的顺序如何&#xff0c;都是一种情况&#xff0c;所以分组后一定要…

美创科技获通信网络安全服务能力评定(应急响应一级)认证!

近日&#xff0c;中国通信企业协会公布通信网络安全服务能力评定2023年第一批获证企业名单。 美创科技获得应急响应一级资质&#xff0c;成为2023年第一批获证企业之一&#xff01; 通信网络安全服务能力评定是对通信网络安全服务单位从事通信网络安全服务综合能力的评定&#…

Promise常用方法笔记

mixin.methods.getList(xxx) 是axios的二次封装 是通过Promise进行基本封装 let a mixin.methods.getList(toosSet.gettype);let b mixin.methods.getList(toosSet.gettypes);let c mixin.methods.getList(toosSet.gettypess);Promise.all([a, b, c]).then((res) > {aler…

连接云-边-端,构建火山引擎边缘云网技术体系

近日&#xff0c;火山引擎边缘云网络产品研发负责人韩伟在LiveVideoStack Con 2023上海站围绕边缘云海量分布式节点和上百T的网络规模&#xff0c;结合边缘云快速发展期间遇到的各种问题和挑战&#xff0c;分享了火山引擎边缘云网的全球基础设施&#xff0c;融合开放的云网技术…

【记录】USSOCOM Urban3D 数据集读取与处理

Urban3D数据集内容简介 Urban3D数据集图像为正摄RGB影像&#xff0c;分辨率为50cm。 从SpaceNet上使用aws下载数据&#xff0c;文件夹结构为&#xff1a; |- 01-Provisional_Train|- GT|- GT中包含GTC&#xff0c;GTI&#xff0c;GTL.tif文件&#xff0c;GTL为ground truth b…

vue v-on 艾特@

vue v-on 内联代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</titl…

centos7下docker设置新的下载镜像源并调整存放docker下载镜像的仓库位置

目录 1.设置镜像源 2.调整存放下载镜像的仓库位置 1.设置镜像源 在 /etc/docker下创建一个daemon.json文件。在json中下入 "registry-mirrors": ["https://docker.mirrors.ustc.edu.cn/"] 完成配置 加载配置 systemctl daemon-reload 重启docker sy…

HarmonyOS/OpenHarmony(Stage模型)应用开发单一手势(二)

三、拖动手势&#xff08;PanGesture&#xff09; .PanGestureOptions(value?:{ fingers?:number; direction?:PanDirection; distance?:number}) 拖动手势用于触发拖动手势事件&#xff0c;滑动达到最小滑动距离&#xff08;默认值为5vp&#xff09;时拖动手势识别成功&am…

开发前期准备工作

开发前期准备工作 文章目录 开发前期准备工作0 代码规范0.1 强制0.2 推荐0.3 参考dao&#xff1a;跟数据库打交道service&#xff1a;业务层&#xff0c;人类思维解决controller&#xff1a;抽象化 0.4 注释规范0.5 日志规范0.6 专有名词0.7 控制层统一异常统一结构体控制层提示…

NSSCTF web 刷题记录1

文章目录 前言题目[GXYCTF 2019]禁止套娃方法一方法二 [NCTF 2019]Fake XML cookbook[NSSRound#7 Team]ec_RCE[NCTF 2018]Flask PLUS 前言 今天是2023.9.3&#xff0c;大二开学前的最后一天。老实说ctf的功力还是不太够做的题目太少&#xff0c;新学期新气象。不可急于求成&am…

宝塔面板定时监控和重启MySQL数据库(计划任务)

往期教程 如果还有不了解宝塔面板怎么使用的小伙伴&#xff0c;可以看下我总结的系列教程&#xff0c;保证从新手变老鸟&#xff1a; 【建站流程科普】 个人和企业搭建网站基本流程及六个主要步骤常见的VPS主机运维面板汇总—网站运维面板云服务器&#xff0c;VPS&#xff0…