本人习惯了借助于 macos mindnode 思考的方式，切换 windows 没有趁手的思维导图用，
于是想手搓一个近似的，但是开发一点后突然想测一下节点多了性能如何，
不测不知道一测吓一跳，二十多个节点拖拽的时候 fps 只有十几二十
求助一下，是否是 Canvas 的局限，还是哪里可以优化？
 | 1 SWBMESSI OP  |
 | 2 WynneChan 1 天前  1 尝试下 Canvas 分层，在你拖动开始时，将受到影响的 Node 和 Edge 创建到一个新的 Canvas 上面，其他静止的节点保持在原来的 Canvas 上。后续的拖动重绘都只重绘在临时创建的这个新的 Canvas 上，减少重绘的数量。 |
 | 3 sillydaddy 1 天前 你给的这图啥也看不出来啊，那些密密麻麻的黑黢黢的点、蓝色的线，都是啥？ |
| 5 SWBMESSI OP @sillydaddy 转 gif 后模糊了， 就是移动节点时候 fps 降低到 20 以下， 静止状态或少节点状态下 fps60 |
| 6 WynneChan 1 天前 @SWBMESSI #4 如果还达不到要求，检查下代码里的渲染是不是多次执行。可以试下把渲染合并 ```ts ctx.beginPath(); // Node 和 edge 绘制 ctx.closePath(); ``` 再进一步就是开个 web worker ，使用 OffscreenCanvas 做离屏渲染 |
 | 7 hijqw12931092 1 天前 你用错东西了吧，用 svg 去做 估计合适，D3.js 看看 |
 | 8 xuncs 1 天前 试试 konvajs ，xyflow 这些 |
 | 9 dingjs 1 天前 才这么几个节点根本不可能卡，哪怕全部清空重绘，建议把代码给 AI 分析一下。 |
 | 10 wangritian 1 天前 确认一下浏览器是否打开了 gpu 硬件加速？另外 canvas 某些代码会不会导致回退到 cpu ？ |
 | 11 EspoirBao 1 天前 用 Fabric.js 把，带独显几千个点不成问题，但是超过 20w 个点就不太像了 |
 | 12 oubenruing 1 天前 先开一下控制台 performance 记录一下，call tree 观察耗时。 |
 | 13 MossFox 1 天前 via Android 不知道具体实现细节，来随便猜一个看看。 如果是在鼠标事件监听器里面就操作 Canvas 画图的话，改成单独修改节点数据状态但不立即开始画，更新画布的时机统一等待 animation frame 。 |
| 14 SWBMESSI OP @wangritian 需要手动开启 开启的话性能好了两倍 |
 | 16 UnluckyNinja 11 小时 41 分钟前 F12 捕捉下性能图，看看火焰图哪个函数时间占比高就知道了 |
Select Language