didi / LogicFlow

专注于业务自定义的流程图编辑框架,支持实现脑图、ER图、UML、工作流等各种图编辑场景。A flow chart editing framework focusing on business customization.

Home Page:https://site.logic-flow.cn

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Bug Report]: MiniMap性能优化

18534613246 opened this issue · comments

发生了什么?

页面存在50以上节点时,页面滚动会出现卡顿现象,浏览器Performance中显示miniMap的setView方法执行用时占比54.2%,关闭miniMap后页面没有卡顿现象,希望官方看下 或者给我一个思路怎么不执行miniMap的setView
image

logicflow/core版本

1.2.3

logicflow/extension版本

1.2.3

logicflow/engine版本

No response

浏览器&环境

Chrome

我们这段时间的功能开发结束后会重新 review 一下 minimap 的实现方式,到时候再处理下这个 issue

在插件源码中看到了有节流函数,但是似乎时间太短了 我这边因为时间问题先把300改为1000 并且增加了requestIdleCallback判断 勉强可以解决,主要是graph:transform事件触发过多导致的
期待官方如果有更好的方法 附代码
const transCallback = throttle((deadline) => {
if (deadline.timeRemaining() > 0 || deadline.didTimeout) {
// console.log('graph:transform')
// 小地图已展示,并且没有拖拽小地图视口
if (_this.isShow && !_this.dragging) {
_this.setView();
}
}else{
requestIdleCallback(transCallback)
}
}, 1000)
const _requestCallback = () => {
requestIdleCallback(transCallback)
}
this.lf.on('graph:transform', `_requestCallback);

2.0.0 版本已发新版 miniMap,我们做了比较大的更新,可以再测试下性能。先关闭此 issue