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

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

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

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

标签：

热门焦点

直屏旗舰来了 iQOO 12和K70 Pro同台竞技

旗舰机基本上使用的都是双曲面屏幕，这就让很多喜欢直屏的爱好者在苦等一款直屏旗舰，这次，你们等到了。据博主数码闲聊站带来的最新爆料称，Redmi下代旗舰K70 Pro和iQOO 12两款手
十个可以手动编写的 JavaScript 数组 API

JavaScript 中有很多API，使用得当，会很方便，省力不少。你知道它的原理吗? 今天这篇文章，我们将对它们进行一次小总结。现在开始吧。1.forEach()forEach()用于遍历数组接收一参
服务存储设计模式：Cache-Aside模式

Cache-Aside模式一种常用的缓存方式，通常是把数据从主存储加载到KV缓存中，加速后续的访问。在存在重复度的场景，Cache-Aside可以提升服务性能，降低底层存储的压力，缺点是缓存和底
一文搞定Java NIO，以及各种奇葩流

大家好，我是哪吒。很多朋友问我，如何才能学好IO流，对各种流的概念，云里雾里的，不求甚解。用到的时候，现百度，功能虽然实现了，但是为什么用这个？不知道。更别说效率问题了~下次再遇到，
梁柱接棒两年，腾讯音乐闯出新路子

文丨田静出品丨牛刀财经（niudaocaijing）7月5日，企鹅FM发布官方公告称由于业务调整，将于9月6日正式停止运营，这意味着腾讯音乐长音频业务走向消亡。腾讯在长音频领域还在摸索。为
认真聊聊东方甄选：如何告别低垂的果实

来源：山核桃作者：财经无忌爆火一年后，俞敏洪和他的东方甄选依旧是颇受外界关心的“网红”。7月5日至9日，为期5天的东方甄选“甘肃行”首次在自有App内直播，
郭明錤称华为和江淮汽车合作开发问界MPV，定价100万左右、计划明年量产

8 月 1 日消息，郭明錤今天在 Medium 平台发布博文，称华为正在和江淮汽车合作，开发售价在 100 万元的问界 MPV，预计在 2024 年第 2 季度量产，销量目标为
2299元起！iQOO Pad明晚首销：性能最强天玑平板

5月23日，iQOO如期举行了新品发布会，除了首发安卓最强旗舰处理器的iQOO Neo8系列新机外，还在发布会上推出了旗下首款平板电脑——iQOO Pad，其最大的卖点
北京：科技教育体验基地开始登记

　　北京“科技馆之城”科技教育体验基地登记和认证工作日前启动。首批北京科技教育体验基地拟于2023年全国科普日期间挂牌，后续还将开展常态化登记。　　北京科技教育体验基

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

前言

Web Worker？（离屏 Canvas）

canvas.transferControlToOffscreen

直屏旗舰来了 iQOO 12和K70 Pro同台竞技

十个可以手动编写的 JavaScript 数组 API

服务存储设计模式：Cache-Aside模式

一文搞定Java NIO，以及各种奇葩流

梁柱接棒两年，腾讯音乐闯出新路子

认真聊聊东方甄选：如何告别低垂的果实

郭明錤称华为和江淮汽车合作开发问界MPV，定价100万左右、计划明年量产

2299元起！iQOO Pad明晚首销：性能最强天玑平板

北京：科技教育体验基地开始登记

最新推荐

猜你喜欢

热门推荐

相关资讯