性能优化——canvas 加载海量图

背景

公司的在线设计稿平台的画板列表页开发时由于数据量不足,未能测出关于画板列表页性能问题,在经过用户一段时间的使用后出现了关于初始化卡顿、缩放卡顿等问题,画板列表页采用了vue-konva

原因

关于画板列表为何卡顿有如下几点原因
1、首先最简单的,在菜单列表的更多按钮下有「移动分组」的操作,此操作按钮下是一个列表大概类似下图
比较致命的缺陷是这个「更多菜单」及其子项都是循环渲染出来的,在数据量较大情况下就会执行大量渲染工作从而阻塞js
env (2).png
2、新增了一个关于鹰眼地图的功能,此功能的一个子功能有一个可以支持多张画板快速对齐的功能,此操作会非常耗时,即使只有两张画板执行此操作也是。
3、画板列表加载问题,在画板列表页初始化加载的时候会获取所有的画板,每个画板其实就是一个image,设计之初为了加载速度将图片的质量下降为1/2倍图,但是后来经过多次迭代后低倍图无法满足用户需求,所以追加了一条逻辑是当图片加载完毕后加载4倍图,这就导致请求直接翻倍,而且图片大小也激增,这也导致我们初始化加载的时候感觉到异常卡顿
4、缩放卡顿问题这是如下原因导致

  1. 图片数量过多:如果你在 Canvas 上绘制了几百个图片,那么每次进行缩放操作时,浏览器需要重新计算和渲染所有的图像。这个计算和渲染的过程对于大量图片来说是非常耗时的,导致卡顿。
  2. 图片大小过大:如果你的图片尺寸过大,绘制并缩放这些图片会消耗更多的计算和内存资源。这会导致性能下降,因为浏览器需要处理更多的数据。

解决方案

1、关于「更多菜单」这个优化是将其从循环中提取出来根据鼠标hover的元素的位置将其定位到该元素旁,这样只需要渲染一次「更多菜单」
2、鹰眼地图功能不涉及DOM结构的改动所以我们将他下放到worker中去执行,如下所示

主线程

const worker = new Worker('worker.js');
worker.onmessage = function(event) {const { updateList } = event.data;// 更新坐标等操作...
};const handleSetLayout = async () => {if (selectArtBoardList.value.length < 2) return;let artboardList = artboardListResult.value.filter((item) => 	 selectArtBoardList.value.includes(item.objectId));worker.postMessage({ artboardList });
};

子线程:

self.onmessage = function(event) {const { artboardList } = event.data;// 计算最大最小x, yconst xyMaxAndMinFun = (list) => { //... };const xyMaxAndMin = xyMaxAndMinFun(artboardList);// 原本逻辑... self.postMessage({ updateList });
};

3、画板列表加载&缩放卡顿问题,将初始化加载倍率下调至1/4倍提升加载速度。改造加载高清图逻辑,我们只需要加载「视口内」的图片为高清图即可。根据用户的「缩放比例」加载不同倍率的高清图。
我们首先要解决的问题是视口问题,我们如何知道那些元素在视口中呢?所以我们首先需要在canvas上绘制一个与画布一样大小的矩形,如下所示:


<v-layer><v-rect ref="rect" :config="{ ...collisionBox }"></v-rect>
</v-layer>/** 这会得到一个永远将画布覆盖的矩形 **/
const collisionBox = ref({width: stageConfigW.value / size.value, // 舞台宽度 / 当前比例height: stageConfigH.value / size.value,x: -stageConfig.value.x / size.value, // 舞台位置 / 当前比例y: -stageConfig.value.y / size.value
});

解决了获取视口问题,我们还需要检查那些画板是被包含在「视口内」的,思路很简单我们只需要判断这个矩形包不包含某个画板的其中一个角即可,代码如下所示:

/** @desc 判断是否在可视区域@params1 矩形位置信息@params2 画板位置信息
*/
function checkArtINView(poi: any, art: any) {const rectw = poi.x + poi.width;if ((art.x > poi.x && art.x < rectw) || (art.x + art.width > poi.x && art.x < rectw) || art.x < rectw) {const recth = poi.y + poi.height;if ((art.y > poi.y && art.y < recth) || (art.y + art.height > poi.y && art.y < recth) || art.y < recth) {return true;}}return false;
}

现在我们只需要再处理一下用户缩放时加载高清图的逻辑这里的优化就差不多了,我们需要通过当前的画布比例大小判断加载不同倍率的图片,代码如下所示:

/** 更新图片 */
function updateArt(art: IArtboard, scale: string | number, width: number) {if (art.nowImgScale == scale) {return;}const img = new Image();img.src = getImageCosPath(art.imagePath, 50, width);img.onload = () => {art.image = img;};art.nowImgScale = scale;
}/** 获取还在视口中的画板 */
function getInViewArt(artList: IArtboard[]) {const list = artList.filter(item => {const isVisible = checkArtINView(collisionBox.value, item);if (isVisible) {return item;}});selectArtBoardList.value = list;list.forEach((art: IArtboard) => {/** 1/4倍图 */if (size.value < 0.25) {updateArt(art, 0.25, art.width / 4);} else if (size.value > 0.25 && size.value < 0.8) {updateArt(art, 0.5, art.width / 2);} else if (size.value > 0.8 && size.value < 1.2) {updateArt(art, 1, art.width);} else if (size.value > 1.2 && size.value < 1.8) {updateArt(art, 2, art.width * 2);} else {updateArt(art, 4, art.width * 4);}});
}

经过上述一系列改动后发现画板列表已经没有那么卡顿了,CPU平均占用率来到了60%~70%左右,比未优化前降低了30% 。
经过一系列优化我们的画板列表页已经流畅了许多但是这并不是极致的优化。

待优化

1、采用离屏渲染技术。
2、缩放防抖&拖拽防抖在这两个操作执行的过程中会进行大量的计算,计算后的数据会影响视图导致重绘,而且由于缩放事件和拖拽事件会连续触发很多次,所以需要加入防抖让其运算操作和重绘次数减少。
3、缩放逻辑不再使用原生的canvas的缩放,转而采用css3的transform,之所以这样做,是因为用css3的transform属性可以利用上GPU开启硬件加速。

总结

由于本次优化时间较短且中途方案有所改动,所以有很多待优化的点,不过就现在画板列表的性能表现来看已经流畅了许多,我们的目的已经达到了。

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

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

相关文章

如何用jmeter请求application/octet-stream,image/jpeg

用postman调用时&#xff1a; 用jmeter&#xff1a; 注意上图不要勾选&#xff0c;不然会把所有的内容都以二进制传进去&#xff0c;我们不勾选只传二进制的图片内容&#xff0c;勾选了会把MIME类型、参数名称都转为二进制传进去。会报错。

华为配置WLAN AC和AP之间VPN穿越示例

配置WLAN AC和AP之间VPN穿越示例 组网图形 图1 配置WLAN AC和AP之间VPN穿越示例组网图 业务需求组网需求数据规划配置思路配置注意事项操作步骤配置文件 业务需求 企业用户接入WLAN网络&#xff0c;以满足移动办公的最基本需求。且在覆盖区域内移动发生漫游时&#xff0c;不影响…

七、矩阵的初等变换

目录 -1. 介绍 0、增广矩阵&#xff1a; 1、初等变换的性质&#xff1a; ​编辑2、矩阵初等变换的分类&#xff1a; 2.1 普通的行阶梯矩阵&#xff1a; 2.2 、行最简形矩阵&#xff1a; 2.3、标准形矩阵&#xff1a; 3、初等变换的定理&#xff1a; 4、初等变换的应用&…

SpringBoot:自定义starter

点击查看&#xff1a;LearnSpringBoot08starter 点击查看&#xff1a;LearnSpringBoot08starterTest 点击查看更多的SpringBoot教程 一、主要流程 1. 先创建空的project 2. 打开空的project 结构 图选中model 点击 3. 创建 model&#xff08;Maven&#xff09;启动器 提…

(九)springmvc+mybatis+dubbo+zookeeper分布式架构 整合 - maven构建ant-framework核心代码Base封装

今天重点讲解的是ant-framework核心代码Base封装过程。 因为涉及到springmvc、mybatis的集成&#xff0c;为了使项目编码更简洁易用&#xff0c;这边将基础的BASE进行封装&#xff0c;其中包括&#xff1a;BaseBean、BaseDao、BaseService、CRUD的基础封装、分页组件的封装、m…

传统推荐算法库使用--mahout初体验

文章目录 前言环境准备调用混合总结 前言 郑重声明&#xff1a;本博文做法仅限毕设糊弄老师使用&#xff0c;不建议生产环境使用&#xff01;&#xff01;&#xff01; 老项目缝缝补补又是三年&#xff0c;本来是打算直接重写写个社区然后给毕设使用的。但是怎么说呢&#xff…

数学家的趣闻轶事65则

目录 前言趣闻轶事65则参考文献 前言 有人的地方就有江湖&#xff0c;有江湖的地方就有故事。数学本身就是一个江湖&#xff0c;这个江湖也充满着血雨腥风和侠骨柔情&#xff0c;至今流传着各种各样的传说&#xff0c;其中不乏”马踏江湖潇潇事“&#xff0c;也有"何当共…

adb-连接模拟器和真机操作

目录 1. 连接模拟器&#xff08;夜神模拟器示例&#xff09; 1.1 启动并连接模拟器 1.2 开启调试模式 2. USB连接真机调试 2.1 usb数据线连接好电脑&#xff0c;手机打开调试模式 2.2 输入adb devices检测手机 3. Wifi连接真机调试 3.1 USB连接手机和电脑 3.2 运行 adb…

什么是抖音视频下载软件|视频批量下载|爬虫工具

抖音视频抓取软件是一款方便用户获取抖音平台上视频内容的工具。它具备以下主要功能&#xff1a; 批量视频提取&#xff1a;用户可以输入关键词&#xff0c;软件将自动搜索抖音平台上与关键词相关的视频&#xff0c;并将它们列出供用户选择和下载。用户可以随时停止搜索和下载过…

爬取m3u8视频

网址&#xff1a;https://www.bhlsm.com/cupfoxplay/609-3-1/ 相关代码&#xff1a; #采集网址&#xff1a;https://www.bhlsm.com/cupfoxplay/609-3-1/ #正常视频网站&#xff1a;完整视频内容 # pip install pycryptodomex #流媒体文件&#xff1a;M3U8&#xff08;把完整的…

Vue+SpringBoot打造校园失物招领管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容2.1 招领管理模块2.2 寻物管理模块2.3 系统公告模块2.4 感谢留言模块 三、界面展示3.1 登录注册3.2 招领模块3.3 寻物模块3.4 公告模块3.5 感谢留言模块3.6 系统基础模块 四、免责说明 一、摘要 1.1 项目介绍 校园失物招领…

抖音视频抓取软件的优势|视频评论内容提取器|批量视频下载

抖音视频抓取软件在市场上的优势明显&#xff1a; 功能强大&#xff1a;我们的软件支持关键词搜索抓取和分享链接单一视频提取两种方式&#xff0c;满足用户不同的需求。同时&#xff0c;支持批量处理数据&#xff0c;提高用户获取视频的效率。 操作简单&#xff1a;我们的软件…

C#实用开发(14)--高清晰度字体和窗体分辨率问题。

新建winform程序是&#xff0c;又是会感觉到字体清晰度不够高。还有一种现象就是分辨率的问题&#xff0c;我们平常在自己的电脑开发是用125百分比的分辨率&#xff0c;实际部署的工控机是100&#xff0c;这就会导致分辨率不一致的问题。 可以通过新建应用程序清单&#xff0c;…

ABAP 导入Excel表示例程序

目录 ABAP 导入excel示例程序创建程序使用的结构上传下载模板 ABAP 导入excel示例程序 批量导入程序&#xff0c;需要使用到导入模板&#xff0c;首先需要创建程序&#xff0c;之后是需要创建excel导入模板&#xff0c;并且需要将excel导入模板上传到SAP系统里面&#xff0c;之…

2023 re:Invent 用 PartyRock 10 分钟构建你的 AI 应用

前言 一年一度的亚马逊云科技的 re:Invent 可谓是全球云计算、科技圈的狂欢&#xff0c;每次都能带来一些最前沿的方向标&#xff0c;这次也不例外。在看完一些 keynote 和介绍之后&#xff0c;我也去亲自体验了一些最近发布的内容。其中让我感受最深刻的无疑是 PartyRock 了。…

【数据结构】每天五分钟,快速入门数据结构(二)——链表

目录 一 构建一个单向链表 二 特点 三 时间复杂度 四 相关算法 1.判断链表是否成环及成环位置 2.链表反转 五 Java中的LinkedList 类 1.使用 2.LinkedList 方法 一 构建一个单向链表 // 设计链表结构class ListNode {int val;ListNode next;ListNode(){}ListNode(int…

LeetCode 2583.二叉树中的第 K 大层和:层序遍历 + 排序

【LetMeFly】2583.二叉树中的第 K 大层和&#xff1a;层序遍历 排序 力扣题目链接&#xff1a;https://leetcode.cn/problems/kth-largest-sum-in-a-binary-tree/ 给你一棵二叉树的根节点 root 和一个正整数 k 。 树中的 层和 是指 同一层 上节点值的总和。 返回树中第 k …

Oracle迁移到mysql-表结构的坑

1.mysql中id自增字段必须是整数类型 id BIGINT AUTO_INCREMENT not null, 2.VARCHAR2改为VARCHAR 3.NUMBER(16)改为decimal(16,0) 4.date改为datetime 5.mysql范围分区必须int格式&#xff0c;不能list类型 ERROR 1697 (HY000): VALUES value for partition …

【Java】RestClient的使用

RestClient的使用 先导入Maven坐标&#xff0c;要和elasticsearch和kibana的版本保持一致 <dependency><groupId>org.elasticsearch.client</groupId><artifactId>elasticsearch-rest-high-level-client</artifactId><version>7.12.1<…

JAVA工程师面试专题-Mysql篇

一、基础 1、mysql可以使用多少列创建索引&#xff1f; 16 2、mysql常用的存储引擎有哪些 存储引擎Storage engine&#xff1a;MySQL中的数据、索引以及其他对象是如何存储的&#xff0c;是一套文件系统的实现。常用的存储引擎有以下&#xff1a; Innodb引擎&#xff1a;In…