Canvas FPS 只有 10 几 求助

尝试下 Canvas 分层，在你拖动开始时，将受到影响的 Node 和 Edge 创建到一个新的 Canvas 上面，其他静止的节点保持在原来的 Canvas 上。后续的拖动重绘都只重绘在临时创建的这个新的 Canvas 上，减少重绘的数量。

你给的这图啥也看不出来啊，那些密密麻麻的黑黢黢的点、蓝色的线，都是啥？

@WynneChan 感谢感谢，这个方法我试一下

@sillydaddy 转 gif 后模糊了， 就是移动节点时候 fps 降低到 20 以下， 静止状态或少节点状态下 fps60

@SWBMESSI #4 如果还达不到要求，检查下代码里的渲染是不是多次执行。可以试下把渲染合并
```ts
ctx.beginPath();
// Node 和 edge 绘制
ctx.closePath();
```
再进一步就是开个 web worker ，使用 OffscreenCanvas 做离屏渲染

你用错东西了吧，用 svg 去做 估计更合适，D3.js 看看

试试 konvajs ，xyflow 这些

才这么几个节点根本不可能卡，哪怕全部清空重绘，建议把代码给 AI 分析一下。

确认一下浏览器是否打开了 gpu 硬件加速？另外 canvas 某些代码会不会导致回退到 cpu ？

用 Fabric.js 把，带独显几千个点不成问题，但是超过 20w 个点就不太像了

先开一下控制台 performance 记录一下，call tree 观察耗时。

不知道具体实现细节，来随便猜一个看看。
如果是在鼠标事件监听器里面就操作 Canvas 画图的话，改成单独修改节点数据状态但不立即开始画，更新画布的时机统一等待 animation frame 。

@wangritian 需要手动开启 开启的话性能好了两倍

@MossFox 开始是这样的鼠标监听器里面就更新，改了之后的性能提升不明显

F12 捕捉下性能图，看看火焰图哪个函数时间占比高就知道了