Web Worker与OffscreenCanvas同步问题咨询（矢量图形缩放渲染场景）

大家好，我现在有个关于Web Worker结合OffscreenCanvas处理矢量图形缩放渲染的问题想请教各位。我的需求是用JavaScript渲染大量矢量图形，每当用户进行缩放操作时，整个画布内容都需要重新渲染，而且要保证视觉上的流畅性，不能让用户感觉到卡顿。为了实现这个目标，我尝试了三种基于Web Worker的解决方案，先和大家说说第一种：

两个UI Canvas搭配transferControlToOffscreen() #

我准备了两个Canvas元素：一个是当前显示在界面上的可见Canvas，另一个是隐藏起来的待渲染Canvas。当用户触发缩放这类变换操作时，我会立刻给当前的可见Canvas应用CSS变换——这个操作速度非常快，能确保UI交互的流畅度，不会让用户觉得操作有延迟。与此同时，我会让Web Worker在后台处理待渲染Canvas对应的OffscreenCanvas，重新渲染符合新变换比例的矢量内容。

等后台的渲染任务完成后，我就会切换两个Canvas的可见性，把刚渲染好的那个Canvas显示出来，替换掉之前的旧内容。

不过在实际使用中，我遇到了一些同步相关的问题：比如当用户快速连续进行缩放操作时，后台的渲染任务会堆积，导致最终切换显示的内容跟不上用户的最新操作；另外，两个Canvas切换的时机如果没把控好，还会出现短暂的画面闪烁...

（另外两个方案我还没整理完，先针对这个方案的问题想问问大家有没有什么好的解决思路或者优化建议？）

内容来源于stack exchange