Canvas FPS 只有 10 几 求助

[SWBMESSI]

本人习惯了借助于 macos mindnode 思考的方式，切换 windows 没有趁手的思维导图用，

于是想手搓一个近似的，但是开发一点后突然想测一下节点多了性能如何，

不测不知道一测吓一跳，二十多个节点拖拽的时候 fps 只有十几二十

求助一下，是否是 Canvas 的局限，还是哪里可以优化？

[SWBMESSI]

[WynneChan]

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

[sillydaddy]

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

[SWBMESSI]

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

[SWBMESSI]

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

[WynneChan]

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

[hijqw12931092]

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

[xuncs]

试试 konvajs ，xyflow 这些

[dingjs]

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

[wangritian]

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

[EspoirBao]

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

[oubenruing]

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

[MossFox]

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

[SWBMESSI]

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

[SWBMESSI]

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

[UnluckyNinja]

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