采用 SVG 实现 web 绘图软件的技术分享
背景
前端技术 使用 svg.js 及全家桶的组件实现 svg 绘图的 web 软件。
MySql8
词语定义
图纸:在页面上绘制的内容整体整体叫做图纸,业务上图纸是具有重要业务意义的概念。
对象:图纸上的业务元素的最小概念。
难点-技术背景
当时遇到一个一直困扰我们的问题:
由于我们实现的保存和更新时,都是将整张图纸内容都发送给服务器,在页面上通过 svg 绘图后的内容过大时,导致向后端发送图纸内容即便压缩后也有至少3~10M 左右不等。
其次,由于在图纸上更新对象(添加、修改、删除)时,除了更新图纸内容外,还需要额外发送对象相关信息,在实现上,两个请求是异步的。
同时,图纸内容的存储形式是压缩后的字符串内容,数据库类型是 longtext。
问题是:
后端图纸内容保存或更新的时间过长,期间如果出现其他操作(添加、修改、删除对象)时,可能带来数据不一致,即图纸内容和图纸内对象的相关信息不一致。
做出努力后的现状:
- 将数据库中的图纸内容的字段(longtext 类型)从图纸表中抽离出来,只剩下主键和内容两个字段。
- 前端加上保存和更新的时间触发频率,如果在指定时间内频繁触发更新或保存,那么只触发一次。
- 前端加上操作限制,在更新图纸时,如果 按 F5 刷新页面属于违规操作。
- 网络传输可以通过带宽来解决,解决的优先级不再很高(服务的后端问题更加凸显)。
偶然而得的解决方案
虽然因为某些原因无法实施,但还是记录下来吧。
方案一(折中,且稳妥)
首先,图纸内容不再用 数据库存储,改为用文件形式,每张图纸一个目录。每次保存或更新时,永远都生成一份文件放入对应的目录,显然文件名必须带有时间序号。
其次,在回显图纸内容(即加载图纸)时,永远去最大的序号的图纸即可。
最后,读取图纸内容必然存在 io 耗时问题,这个我们可以对最新的图纸加上缓存(可以是直接内存Map或干脆 redis)即可。
要求:保存、更新、下载图纸内容时只管保存到缓存即可,数据库的更新不再成为瓶颈,可以定期更新或延时更新数据库。
好处:暂时没想到会带来其他问题。
方案二(完美,但改动大)
在方案一的基础上,将两个请求彻底何为一个。即将图纸内容更新 和 对象信息的更新合并后一个请求。
思路:我们没有必要将对象信息单独传送,可以将对象信息和图纸放在一起,建议放在 svg 签的内部的自定义标签,比如<pid-data></pid-data>,只要不显示在页面上就行了。
如此一来,两个信息合并后,我们就都认为是图纸数据,便可以一起压缩传输到服务器。
相关文章:
采用 SVG 实现 web 绘图软件的技术分享
背景 前端技术 使用 svg.js 及全家桶的组件实现 svg 绘图的 web 软件。 MySql8 词语定义 图纸:在页面上绘制的内容整体整体叫做图纸,业务上图纸是具有重要业务意义的概念。 对象:图纸上的业务元素的最小概念。 难点-技术背景 当时遇到…...
Qt --- QTimer
在Qt开发界面的时候,非常多的时候都得使用定时器,定时器具体可以干什么呢?比如:控制时钟、定时改变样式、改变进度等。。。说到这里,经常使用QQ,而不同的时段都会显示不同的背景,我认为如果用Qt…...
计算机终端核心安全配置规范
声明 本文是学习 政务计算机终端核心配置规范. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 范围 本标准提出了政务计算机终端核心配置的基本概念和要求,规定了核心配置的自动化实现方法,规范了核心配置实施流程。 本标准适…...
【Spring Boot】什么是深度优先遍历与广度优先遍历?用Spring Boot项目举例说明。
深度优先遍历(Depth First Search,DFS)和广度优先遍历(Breadth First Search,BFS)是图的遍历算法。其中,深度优先遍历从某个起始点开始,先访问一个节点,然后跳到它的一个…...
MetaMask Mobile +Chrome DevTools 调试Web3应用教程
注:本教程来源网络,有兴趣的可以直接到这里查看。 写好了WEB3应用,在本地调试用得好好的,但是用钱包软件访问就报莫名的错,但是又不知道是什么原因,排查的过程非常浪费时间 。 因此在本地同一局域网进行调试…...
栈和队列OJ题
有效括号问题: 题目描述: 给定一个只包括 (,),{,},[,] 的字符串 s ,判断字符串是否有效。 有效字符串需满足: 左括号必须用相同类型的右括号闭合。左括号必须以正确的…...
36k字从Attention讲解Transformer及其在Vision中的应用(pytorch版)
文章目录 0.卷积操作1.注意力1.1 注意力概述(Attention)1.1.1 Encoder-Decoder1.1.2 查询、键和值1.1.3 注意力汇聚: Nadaraya-Watson 核回归1.2 注意力评分函数1.2.1 加性注意力1.2.2 缩放点积注意力1.3 自注意力(Self-Attention)1.3.1 自注意力的定义和计算1.3.2 自注意…...
网站怎么选择适合的服务器
IDC数据中心大致分为T1、T2、T3、T4 T1:基本机房基础设施(可用性99.671%、年平均故障时间28.8小时) 1) T1 基本数据中心拥有非冗余容量组件,以及一个单一的非冗余分配路径来为关键环境提供服务。T1 基础设施包括:IT …...
http协议和HTTP编程流程
目录 1、http协议 (1)概念 (2)使用的端口 (3)长连接和短连接 (4)常见web服务器 2、https(443) 3、浏览器连接服务器编程 1、http协议 (超文…...
【NPM】包的指令
npm 安装的包可以根据其用途和作用进行分类,一般可以分为以下几种类型: 普通依赖(Regular Dependencies): 这些是你项目中的实际依赖项,用于构建、运行或扩展你的应用程序。这些依赖会被包含在你的应用程序…...
音频4A算法导论
+我V hezkz17进数字音频系统研究开发交流答疑群(课题组) 一 音频4A算法是? 音频4A算法是指自动增益控制(Automatic Gain Control, AGC)、自动噪声抑制(Automatic Noise Suppression, ANS)和自动回声消除(Automatic Echo Cancellation, AEC),主动降噪ANC(Active Noi…...
SecureBridge安全文件下载的组件Crack
SecureBridge安全文件下载的组件Crack SecureBridge包括SSH、SSL和SFTP客户端和服务器组件。它使用SSH或SSL安全传输层协议和加密消息语法来保护任何TCP流量,这些协议为客户端和服务器提供身份验证、强数据加密和数据完整性验证。SecureBridge组件可以与数据访问组件…...
进程同步
目录 临界区(Critical Section): 互斥量(Mutex): 信号量(Semaphore): 事件(Event): 进程同步的四种方法 临界区(Critical Section): 通过对多线程的串行…...
Prometheus+Grafana+AlertManager监控Linux主机状态
文章目录 PrometheusGrafanaAlertManager监控平台搭建开始监控Grafana连接Prometheus数据源导入Grafana模板监控Linux主机状态 同系列文章 PrometheusGrafanaAlertManager监控平台搭建 Docker搭建并配置Prometheus Docker拉取并配置Grafana Docker安装并配置Node-Exporter …...
UI设计第一步,在MasterGo上开展一个新项目
我们都知道,一个完整的项目,要经历创建团队、搭建组件库、应用规范以及管理设计资产,那么今天小编就在MasterGo中带你从0到1开展一个全新的项目。 你一定遇到过这种情况,同团队的设计师,由于使用不同版本或不同软件&a…...
【校招VIP】TCP/IP模型之常用协议和端口
考点介绍: 大厂测试校招面试里经常会出现TCP/IP模型的考察,TCP/IP协议是网络基础知识,是互联网的基石,不管你是做开发、运维还是信息安全的,TCP/IP 协议都是你绕不过去的一环,程序员需要像学会看书写字一样…...
Spring统一功能处理
1. AOP存在的问题 获取参数复杂AOP的规则相对简单 2. 拦截器 2.1. 应用(以登录为例) 2.1.1. 自定义拦截器 新建interceptor文件夹 import org.springframework.web.servlet.HandlerInterceptor;import javax.servlet.http.HttpServletRequest; import javax.servlet.http…...
搭建CFimagehost私人图床,实现公网远程访问的详细指南
文章目录 1.前言2. CFImagehost网站搭建2.1 CFImagehost下载和安装2.2 CFImagehost网页测试2.3 cpolar的安装和注册 3.本地网页发布3.1 Cpolar临时数据隧道3.2 Cpolar稳定隧道(云端设置)3.3.Cpolar稳定隧道(本地设置) 4.公网访问测…...
Python的logging.config模块
要使用Python的logging.config模块记录一个月的日志数据,你可以按照以下步骤进行操作: 首先,导入必要的模块: import logging import logging.config import datetime创建一个配置文件,例如logging.ini,用…...
【2023】LeetCode HOT 100——滑动窗口子串
目录 1. 无重复字符的最长子串1.1 C++实现1.2 Python实现1.3 时空分析2. 找到字符串中所有字母异位词2.1 C++实现2.2 Python实现2.3 时空分析3. 和为 K 的子数组3.1 C++实现3.2 Python实现3.3 时空分析4. 滑动窗口最大值4.1 C++实现4.2 Python实现4.3 时空分析5. 最小覆盖子串5…...
KubeSphere 容器平台高可用:环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界,看笔记好好学多敲多打,每个人都是大神! 题目:KubeSphere 容器平台高可用:环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...
shell脚本--常见案例
1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件: 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...
2021-03-15 iview一些问题
1.iview 在使用tree组件时,发现没有set类的方法,只有get,那么要改变tree值,只能遍历treeData,递归修改treeData的checked,发现无法更改,原因在于check模式下,子元素的勾选状态跟父节…...
[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...
鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/
使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题:docker pull 失败 网络不同,需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...
AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别
【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而,传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案,能够实现大范围覆盖并远程采集数据。尽管具备这些优势…...
C++ 设计模式 《小明的奶茶加料风波》
👨🎓 模式名称:装饰器模式(Decorator Pattern) 👦 小明最近上线了校园奶茶配送功能,业务火爆,大家都在加料: 有的同学要加波霸 🟤,有的要加椰果…...
BLEU评分:机器翻译质量评估的黄金标准
BLEU评分:机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域,衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标,自2002年由IBM的Kishore Papineni等人提出以来,…...
永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器
一、原理介绍 传统滑模观测器采用如下结构: 传统SMO中LPF会带来相位延迟和幅值衰减,并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF),可以去除高次谐波,并且不用相位补偿就可以获得一个误差较小的转子位…...
使用SSE解决获取状态不一致问题
使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件,这个上传文件是整体功能的一部分,文件在上传的过程中…...
