当前位置：首页 > 科技 > 软件

把 Canvas 放到 WebWorker 中去绘制？想都不敢想有多爽！

来源：责编：时间：2024-07-19 07:59:00 285观看

导读前言大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心！最近项目中需要绘制一块画布，大致上样子如下，就是绘制一堆人名在 Canvas 上（实际业务比这个复杂）。图片大致代码如下：页面肯定

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心！

最近项目中需要绘制一块画布，大致上样子如下，就是绘制一堆人名在 Canvas 上（实际业务比这个复杂）。

图片

大致代码如下：

页面肯定不止只有 Canvas 的逻辑，就比如我在绘制画布后，想去计算 1-100 的数字总和。

图片

但是最终发现，绘制画布耗费了很多时间，差不多有 1s 的时间，并且堵塞了主进程的代码，导致了我后续的逻辑被堵住了，下图可以看到，我的 computedTotal 结果是在画布绘制完菜执行完的。

图片

所以绘制画布的耗时过长，阻塞了后续的同步代码逻辑，这是不合理的，我们需要做优化。

Web Worker？（离屏 Canvas）

我们平时在遇到这类情况的时候，十有八九第一时间都会想到 Web Worker。

但是问题来了：正常来说，Web Worker 中可获取不了 DOM，做不了画布绘制呀。

估计会有人想：那我们可以把 Canvas 的 DOM 节点传入 Web Worker 中吗？

可以试试！

我们先准备一个 worker.js 来存放 Web Worker 的代码：

图片

接着在 index.js 中把 Canvas 的 DOM 节点传过去。

图片

发现会报错，因为 postMessage 传数据的时候会进行深拷贝，而 DOM 节点无法被深拷贝。

那么传上下文过去可以吗？也可以试试！

图片

可以发现，还是不行。

图片

canvas.transferControlToOffscreen

不得不说 JavaScript 是真的强大，早就为我们准备好了一个 API ，那就是 transferControlToOffscreen。

图片

有了这个 API ，我们就可以把 Canvas 的 DOM 节点以另一种方式传入 Web Worker 了！！！我们也能在 Web Worker 中去进行 Canvas 的绘制，进而优化主线程的代码执行效率！！

首先改造一下 drawSunshine，现在只需要传入 Canvas DOM，不需要在主线程去做绘制。

图片

接着我们在 worker.js 中去接收 DOM 节点，并进行画布绘制。

图片

最终可以看到，Canvas 的绘制并不会阻塞后续逻辑的执行。

图片

本文链接：http://www.28at.com/showinfo-26-101708-0.html把 Canvas 放到 WebWorker 中去绘制？想都不敢想有多爽！

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： Python 中窗口操作的完整指南

下一篇：轻盈高效：深入了解.NET中的ValueStopwatch计时器

标签：

热门焦点

MIX Fold3包装盒泄露新机本月登场

小米的全新折叠屏旗舰MIX Fold3将于本月发布，近日该机的真机包装盒在网上泄露。从图上来看，新的MIX Fold3包装盒在外观设计方面延续了之前的方案，变化不大，这也是目前小米旗舰
官方承诺：K60至尊版将会首批升级MIUI 15

全新的MIUI 15今天也有了消息，在官宣了K60至尊版将会搭载天玑9200+处理器和独显芯片X7的同时，Redmi给出了官方承诺，K60至尊重大更新首批升级，会首批推送MIUI 15。也就是说虽然
红魔电竞平板评测：大屏幕硬实力

前言：三年的疫情因为要上网课的原因激活了平板市场，如今网课的时代已经过去，大家的生活都恢复到了正轨，这也就意味着，真正考验平板电脑生存的环境来了。也就是面对着这种残酷的
自动化在DevOps中的力量：简化软件开发和交付

自动化在DevOps中扮演着重要角色，它提升了DevOps的效能。通过自动化工具和方法，DevOps团队可以实现以下目标：消除手动和重复性任务。简化流程。在整个软件开发生命周期中实现更
品牌洞察丨服务本地，美团直播成效几何？

来源：17PR7月11日，美团App首页推荐位出现“美团直播”的固定入口。在直播聚合页面，外卖“神枪手”直播间、美团旅行直播间、美团买菜直播间等均已上线，同时
当家的盒马，加速谋生

来源 | 价值星球Planet作者 | 归去来自己“当家”的盒马，开始加速谋生了。据盒马官微消息，盒马计划今年开放生鲜供应链，将其生鲜商品送往食堂。目前，盒马在上海已经与
阿里瓴羊One推出背后，零售企业迎数字化新解

作者:刘旷近年来随着数字经济的高速发展，各式各样的SaaS应用服务更是层出不穷，但本质上SaaS大多局限于单一业务流层面，对用户核心关切的增长问题等则没有提供更好的解法。在Saa
Windows 11发布，微软一改往常对老机型开放的态度

距离 Windows 11 发布已经过去一周，在过去一周里，很多数码爱好者围绕其对 Android 应用的支持、对老机型的升级问题展开了激烈讨论。与以往不同的是，在这次大
DRAM存储器10月价格下跌，NAND闪存本月价格与上月持平

10月30日，据韩国媒体消息，自今年年初以来一直在上涨的 DRAM 存储器的交易价格仅在本月就下跌了近 10％，此次是全年首次降价，而NAND 闪存本月价格与上月持平。市

把 Canvas 放到 WebWorker 中去绘制？想都不敢想有多爽！

前言

Web Worker？（离屏 Canvas）

canvas.transferControlToOffscreen

MIX Fold3包装盒泄露新机本月登场

官方承诺：K60至尊版将会首批升级MIUI 15

红魔电竞平板评测：大屏幕硬实力

自动化在DevOps中的力量：简化软件开发和交付

品牌洞察丨服务本地，美团直播成效几何？

当家的盒马，加速谋生

阿里瓴羊One推出背后，零售企业迎数字化新解

Windows 11发布，微软一改往常对老机型开放的态度

DRAM存储器10月价格下跌，NAND闪存本月价格与上月持平

最新推荐

猜你喜欢

热门推荐

相关资讯