采用 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…...
装饰模式(Decorator Pattern)重构java邮件发奖系统实战
前言 现在我们有个如下的需求,设计一个邮件发奖的小系统, 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其…...
树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作,无需更改相机配置。但是,一…...
让AI看见世界:MCP协议与服务器的工作原理
让AI看见世界:MCP协议与服务器的工作原理 MCP(Model Context Protocol)是一种创新的通信协议,旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天,MCP正成为连接AI与现实世界的重要桥梁。…...
多模态大语言模型arxiv论文略读(108)
CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题:CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者:Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...
css3笔记 (1) 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size:0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)
目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关࿰…...
音视频——I2S 协议详解
I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议,专门用于在数字音频设备之间传输数字音频数据。它由飞利浦(Philips)公司开发,以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...
20个超级好用的 CSS 动画库
分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码,而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库,可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画,可以包含在你的网页或应用项目中。 3.An…...
Razor编程中@Html的方法使用大全
文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...
AI语音助手的Python实现
引言 语音助手(如小爱同学、Siri)通过语音识别、自然语言处理(NLP)和语音合成技术,为用户提供直观、高效的交互体验。随着人工智能的普及,Python开发者可以利用开源库和AI模型,快速构建自定义语音助手。本文由浅入深,详细介绍如何使用Python开发AI语音助手,涵盖基础功…...
