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

主要观点总结

文章主要介绍了前端私教训练营的内容，以及解决Web开发中Canvas绘制耗时过长、阻塞主线程的问题。通过Web Worker和transferControlToOffscreen API进行离屏Canvas绘制，提升代码执行效率。

关键观点总结

关键观点1: 前端私教训练营介绍

文章介绍了1v1私教，终身辅导计划，帮助学员拿到满意offer。推荐了一个靠谱的Sunday老师，提供了加微沟通以及领取大厂面试题和大厂真实面经的福利。

关键观点2: Canvas绘制问题及解决方案

文章指出了在Web开发中Canvas绘制耗时过长、阻塞主线程的问题。探讨了使用Web Worker和transferControlToOffscreen API进行离屏Canvas绘制的解决方案。

关键观点3: 具体实现方法

文章详细描述了如何使用Web Worker和transferControlToOffscreen API进行离屏Canvas绘制。包括准备worker.js文件存放Web Worker代码，将Canvas DOM节点传入Web Worker中进行绘制等步骤。

文章预览

前端私教训练营：1v1私教，终身辅导计划，帮你拿到满意的  offer 。  已帮助数百位同学拿到了中大厂  offer 前言 大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~ 最近项目中需要绘制一块画布，大致上样子如下，就是绘制一堆人名在 Canvas 上（实际业务比这个复杂） 大致代码如下 页面肯定不止只有 Canvas 的逻辑，就比如我在绘制画布后，想去计算 1-100 的数字总和 但是最终发现，绘制画布耗费了很多时间，差不多有 1s 的时间，并且堵塞了主进程的代码，导致了我后续的逻辑被堵住了，下图可以看到，我的 computedTotal 结果是在画布绘制完菜执行完的 所以绘制画布的耗时过长，阻塞了后续的同步代码逻辑，这是不合理的，我们需要做优化 Web Worker？（离屏 Canvas） 我们平时在遇到这类情况的时候 ………………………………