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

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

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

导读前言大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心！最近项目中需要绘制一块画布，大致上样子如下，就是绘制一堆人名在 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计时器

标签：

热门焦点

对标苹果的灵动岛华为带来实况窗功能

继苹果的灵动岛之后，华为也在今天正式推出了“实况窗”功能。据今天鸿蒙OS 4.0的现场演示显示，华为的实况窗可以更高效的展现出实时通知，比如锁屏上就能看到外卖、打车、银行
5月iOS设备好评榜：iPhone 14仅排第43？

来到新的一月，安兔兔的各个榜单又重新汇总了数据，像安卓阵营的榜单都有着比较大的变动，不过iOS由于设备的更新换代并没有那么快，所以相对来说变化并不大，特别是iOS好评榜，老款设
Rust中的高吞吐量流处理

作者 | Noz编译 | 王瑞平本篇文章主要介绍了Rust中流处理的概念、方法和优化。作者不仅介绍了流处理的基本概念以及Rust中常用的流处理库，还使用这些库实现了一个流处理程序
三分钟白话RocketMQ系列—— 如何发送消息

我们知道RocketMQ主要分为消息生产、存储（消息堆积）、消费三大块领域。那接下来，我们白话一下，RocketMQ是如何发送消息的，揭秘消息生产全过程。注意，如果白话中不小心提到相关代
一个注解实现接口幂等，这样才优雅！

场景码猿慢病云管理系统中其实高并发的场景不是很多，没有必要每个接口都去考虑并发高的场景，比如添加住院患者的这个接口，具体的业务代码就不贴了，业务伪代码如下：图片上述代码有
小红书1周涨粉49W+，我总结了小白可以用的N条涨粉笔记

作者：黄河懂运营一条性教育视频，被54万人“珍藏”是什么体验？最近，情感博主@公主是用鲜花做的，火了！仅仅凭借一条视频，光小红书就有超过128万人，为她疯狂点赞！更疯狂的是，这
认真聊聊东方甄选：如何告别低垂的果实

来源：山核桃作者：财经无忌爆火一年后，俞敏洪和他的东方甄选依旧是颇受外界关心的“网红”。7月5日至9日，为期5天的东方甄选“甘肃行”首次在自有App内直播，
2纳米决战2025

集微网报道从三强争霸到四雄逐鹿，2nm的厮杀声已然隐约传来。无论是老牌劲旅台积电、三星，还是誓言重回先进制程领先地位的英特尔，甚至初成立不久的新
3699元！iQOO Neo8 Pro顶配版今日首销：1TB UFS 4.0同价位唯一

5月23日，iQOO推出了全新的iQOO Neo8系列，包含iQOO Neo8和iQOO Neo8 Pro两个版本，其中标准版搭载高通骁龙8+，而Pro版更是首发搭载了联发科天玑9200+旗舰