SPA单页面的讲解(超级详细)

目录

一、什么是SPA

二、SPA和MPA的区别

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

单页应用优缺点

三、实现一个SPA

原理

实现

hash 模式

history模式

四、题外话:如何给SPA做SEO

SSR服务端渲染

静态化

使用Phantomjs针对爬虫处理

一、什么是SPA

SPA(single-page application),翻译过来就是单页应用SPA是一种网络应用程序或网站的模型,它通过动态重写当前页面来与用户交互,这种方法避免了页面之间切换打断用户体验在单页应用中,所有必要的代码(HTMLJavaScriptCSS)都通过单个页面的加载而检索,或者根据需要(通常是为响应用户操作)动态装载适当的资源并添加到页面页面在任何时间点都不会重新加载,也不会将控制转移到其他页面举个例子来讲就是一个杯子,早上装的牛奶,中午装的是开水,晚上装的是茶,我们发现,变的始终是杯子里的内容,而杯子始终是那个杯子结构如下图

我们熟知的JS框架如react,vue,angular,ember都属于SPA

二、SPA和MPA的区别

上面大家已经对单页面有所了解了,下面来讲讲多页应用MPA(MultiPage-page application),翻译过来就是多页应用在MPA中,每个页面都是一个主页面,都是独立的当我们在访问另一个页面的时候,都需要重新加载htmlcssjs文件,公共文件则根据需求按需加载如下图

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

单页面应用(SPA)多页面应用(MPA)
组成一个主页面和多个页面片段多个主页面
刷新方式局部刷新整页刷新
url模式哈希模式历史模式
SEO搜索引擎优化难实现,可使用SSR方式改善容易实现
数据传递容易通过url、cookie、localStorage等传递
页面切换速度快,用户体验良好切换加载资源,速度慢,用户体验差
维护成本相对容易相对复杂

单页应用优缺点

优点:

  • 具有桌面应用的即时性、网站的可移植性和可访问性
  • 用户体验好、快,内容的改变不需要重新加载整个页面
  • 良好的前后端分离,分工更明确

缺点:

  • 不利于搜索引擎的抓取
  • 首次渲染速度相对较慢

三、实现一个SPA

原理

  1. 监听地址栏中hash变化驱动界面变化
  2. pushsate记录浏览器的历史,驱动界面发送变化

实现

hash 模式

核心通过监听url中的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  

history模式

history 模式核心借用 HTML5 history apiapi 提供了丰富的 router 相关属性先了解一个几个相关的api

  • history.pushState 浏览器历史纪录添加记录
  • history.replaceState修改浏览器历史纪录中当前纪录
  • history.popState 当 history 发生变化时触发
// 定义 Router  
class Router {  constructor () {  this.routes = {};  this.listerPopState()  }  init(path) {  history.replaceState({path: path}, null, path);  this.routes[path] && this.routes[path]();  }  route(path, callback){  this.routes[path] = callback;  }  push(path) {  history.pushState({path: path}, null, path);  this.routes[path] && this.routes[path]();  }  listerPopState () {  window.addEventListener('popstate' , e => {  const path = e.state && e.state.path;  this.routers[path] && this.routers[path]()  })  }  
}  // 使用 Router  window.miniRouter = new Router();  
miniRouter.route('/', ()=> console.log('page1'))  
miniRouter.route('/page2', ()=> console.log('page2'))  // 跳转  
miniRouter.push('/page2')  // page2  


四、题外话:如何给SPA做SEO

下面给出基于VueSPA如何实现SEO的三种方式

SSR服务端渲染

将组件或页面通过服务器生成html,再返回给浏览器,如nuxt.js

静态化

目前主流的静态化主要有两种:(1)一种是通过程序将动态页面抓取并保存为静态页面,这样的页面的实际存在于服务器的硬盘中(2)另外一种是通过WEB服务器的 URL Rewrite的方式,它的原理是通过web服务器内部模块按一定规则将外部的URL请求转化为内部的文件地址,一句话来说就是把外部请求的静态地址转化为实际的动态页面地址,而静态页面实际是不存在的。这两种方法都达到了实现URL静态化的效果

使用Phantomjs针对爬虫处理

原理是通过Nginx配置,判断访问来源是否为爬虫,如果是则搜索引擎的爬虫请求会转发到一个node server,再通过PhantomJS来解析完整的HTML,返回给爬虫。下面是大致流程图

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

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

相关文章

这是一片测试文章

这是一片测试文章 这是一片测试文章 这是一片测试文章 这是一片测试文章 这是一片测试文章 这是一片测试文章 真的是测试文章 -111122225555444433333333222211111 dddddaaa

❤css实用

❤ css实用 CSS渐变色边框(Gradient borders方法的汇总 5种-代码可直接下载) 资源链接 https://download.csdn.net/download/weixin_43615570/88779950?spm1001.2014.3001.5503 给 border 设置渐变色是很常见的效果,实现这个效果有很多思路…

近20k stars,GSYVideoPlayer一款优秀的视频播放器

近20k stars,GSYVideoPlayer一款优秀的视频播放器 引言 在现代社会中,视频已经成为人们获取信息和娱乐的重要形式。为了提供更好的观看体验,开发一款优秀的视频播放器变得至关重要。而GSYVideoPlayer作为一款功能强大、稳定可靠的视频播放器…

浙江机电职业技术学院第八届新生亮相赛(同步赛)D.一种很新的阶乘【线性筛+一分为二法】

原题链接:https://ac.nowcoder.com/acm/contest/73799/D 时间限制:C/C 2秒,其他语言4秒 空间限制:C/C 262144K,其他语言524288K 64bit IO Format: %lld 题目描述 夜雷很喜欢特别大的数字,曾经一度算阶乘…

没指定spring-boot-maven-plugin版本导致编译失败,这坑你踩过没

文章目录 1. 前言2. 组件版本信息3. 事件经过3.1 本地通过maven命令打包3.2 定位问题步骤3.2.1 核对spring-boot-maven-plugin版本信息3.2.2 spring-boot-maven-plugin版本错误原因 3.3 解决方案 4.结论 1. 前言 我们在平时开发过程中关注的比较多的是项目开发时依赖包的版本以…

lightdb object支持static函数

文章目录 背景介绍语法示例 背景 在信创适配中,从Oracle迁移过来的程序使用STATIC函数。为此LightDB从24.1版本开始,对该功能进行了支持。 介绍 LightDB 24.1版本中对象方法包括下列几种: MEMBER方法:MEMBER方法可以被对象实例…

数据结构(绪论+算法的基本概念)

文章目录 一、绪论1.1、数据结构的基本概念1.2、数据结构三要素1.2.1、逻辑结构1.2.2、数据的运算1.2.3、物理结构(存储结构)1.2.4、数据类型和抽象数据类型 二、算法的基本概念2.1、算法的特性2.2、“好”算法的特质2.2.1、算法时间复杂度2.2.2、算法空…

java数学计算工具类 double精确的加法算法 double精确的减法算法

java数学计算工具类 double精确的加法算法 double精确的减法算法 精确的乘法算法 对精确的除法运算,当发生除不尽的 保留小数、数值精度 精确的加法算法:2.27 精确的减法算法:0.01 精确的乘法算法:1.2882 相对精确的除法运算,当发生除不尽的情况时&…

【WebGPU】简介和开始

简介 WebGPU 是一种 API,用于在 Web 应用中访问 GPU 的功能。在 WebGPU 出现之前,有一个 WebGL,它提供了 WebGPU 的部分功能。它开创了一种新的富媒体 Web 内容类别,并且开发者也利用它构建了许多精彩的内容。不过,它…

领域驱动设计(Domain-Driven Design DDD)——通过重构找到深层次模型1

一、概述 重构就是在不改变软件功能的前提下重新设计它。开发人员无需在着手开发之前做出详细的设计决策,只需要在开发过程中不断小幅调整设计即可,这不但能够保证软件原有的功能不变,还可使整个设计更加灵活易懂。 我们面临的真正挑战是找到…

【机器视觉实验】机器视觉实验四——基于knn的场景图像检索、基于SVM的人脸图像识别

一、实验内容 实验内容包含要进行什么实验,实验的目的是什么,实验用到的算法及其原理的简单介绍。 (1) 编程实现基于knn的场景图像检索 a) 至少实现三种特征组合进行检索; b) 使用recall与precision分析不同特征组合对检索精度的影响。 (2) 实现基于SVM的人脸图像识…

java使用MD5加密

java使用MD5加密 源字符串:三四五 使用 UTF-8字符集字符集加密后的结果为:f2615f1dab4520fc1e1a79ed6a4f7b37 用 GB2312 字符集加密后的结果为:1dbb006b41466197c486592727af516f 用 GBK 字符集加密后的结果为:1dbb006b41466197c486592727af516f

TCP 状态转换以及半关闭

TCP 状态转换: 上图中还没有进行握手的时候状态是关闭的。 三次握手状态的改变: 客户端发起握手。 调用 connect() 函数时状态转化为:SYN_SENT。调用 listen() 函数时状态转换为:LISTEN。ESTABLISHED是被连接的状态。 四次挥手…

Python系列(7)—— 运算符的优先级

一、引言 在Python中,当一个表达式包含多个运算符时,运算符的优先级决定了这些运算符的执行顺序。高优先级的运算符会先于低优先级的运算符进行计算。了解和掌握运算符的优先级对于编写正确的Python代码至关重要。 二、Python中的运算符优先级 Python…

2023-2024年广东省职业院校技能大赛信息安全管理与评估赛项规程

2023-2024 年度广东省职业院校技能大赛“信息安全管理与评估”赛项规程 一、赛项名称 赛项编号:GZ032 赛项名称:信息安全管理与评估 英语翻译:Information Security Management and Evaluation 赛项组别:高职组 竞赛形式&am…

httprunnerV4.X的基本使用详解

目录 1、httprunner概述 1.1、httprunner的优点 2、httprunner的安装 3、基本命令的使用 3.1、生成脚手架 3.2、将har文件转换为测试用例文件 3.3、执行测试用例 3.4、为项目创建虚拟环境,然后安装httprunner库 3.4、执行测试用例生成测试报告 4、httprun…

CSS 双色拼接按钮效果

<template><view class="sss"><button> <!-- 按钮 --><view class="span"> 按钮 </view> <!-- 按钮文本 --></button></view></template><script></script><style>body {b…

【Git】windows系统安装git教程和配置

一、何为Git Git(读音为/gɪt/)是一个开源的分布式版本控制系统&#xff0c;可以有效、高速地处理从很小到非常大的项目版本管理。 二、git安装包 有2种版本&#xff0c;Git for Windows Setup和Git for Windows Portable(便携版)两个版本都可以。 三、Git for Windows Por…

js设计模式实例

js设计模式 设计模式&#xff08;Design pattern&#xff09;代表了最佳的实践&#xff0c;通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误…

Linux命令-arj命令(用于创建和管理.arj压缩包)

补充说明 arj命令 是 .arj 格式的压缩文件的管理器&#xff0c;用于创建和管理 .arj 压缩包。 语法 arj(参数)参数 操作指令&#xff1a;对 .arj 压缩包执行的操作指令压缩包名称&#xff1a;指定要操作的arj压缩包名称