Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The CPU usage of Tree component v3.2.0 is 5% higher than that of v3.1.0, the UI will be stuck, and all nodes in the entire tree will be refreshed when only one node's Check state is modified #5551

Closed
1 task
liupan1890 opened this issue Apr 26, 2022 · 3 comments

Comments

@liupan1890
Copy link

  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.2.2

Environment

win10,electron 12.0.9,vue 3.2.33

Reproduction link

https://vuecomponent.github.io/issue-helper/

Steps to reproduce

1.实例化一个标准的Tree,设置了 :checkedKeys="checkedKeys"自主控制节点选中状态

<Tree
checkable
blockNode
:selectable="false"
checkStrictly
autoExpandParent
showIcon
:height="TreeHeight"
:style="{ height: TreeHeight   'px' }"
:showLine="{ showLeafIcon: false }"
:onSelect="handleTreeSelect"
:onCheck="handleTreeCheck"
:expandedKeys="expandedKeys"
:checkedKeys="checkedKeys"
:treeData="TreeData"
>
<template #switcherIcon>
<i className="ant-tree-switcher-icon iconfont Arrow" />
</template>
<template #title="{ dataRef }">
<span class="cleantitleleft">{{ dataRef.title }}</span>
<span class="cleantitleright">{{ dataRef.sizestr }}</span>
</template>
</Tree>

2.点击一个节点的CheckBox,改变此节点的选中状态

What is expected?

1.v3.2.0版本和v3.1.0版本性能一致,没有差异
2.手动勾选这个节点时,只触发这个节点本身的dom重绘,其他节点保持不变

What is actually happening?

1.v3.2.0版本CPU平均在13%--17%
v3.1.0版本CPU平均在9%--12%,两个版本性能差异十分明显
2.手动勾选这个节点时,所有节点都会重绘

--
附上截图,对比CPU使用率,已勾选开发工具--Rendering--Paint flashing
v3.1.0截图
test2 1

v3.2.0截图
test2 2

@github-actions github-actions bot changed the title Tree组件v3.2.0比v3.1.0版本CPU占用提高5%,UI会卡,并且仅修改一个节点的Check状态时整树所有节点都会被刷新 The CPU usage of Tree component v3.2.0 is 5% higher than that of v3.1.0, the UI will be stuck, and all nodes in the entire tree will be refreshed when only one node's Check state is modified Apr 26, 2022
@liupan1890
Copy link
Author

liupan1890 commented Apr 26, 2022

2组截图时,代码,环境,完全一致。仅修改了package.json里面的antdv版本号

上报issue是因为,v3.1.0时,点击Checkbox后,该节点的选中状态会 立即 改变(选中--未选中)
v3.2.0时,点击Checkbox后,该节点的选中状态 不会 理解改变(选中--等待0.5秒--未选中)

会让人明显感觉卡了一下,感觉有性能问题,开了Paint flashing想调试一下,结果发现仅仅改变一个节点的Check状态就会导致整个树刷新,这个逻辑明显时可以优化的,又不是treeData刷新了,为什么要刷新整个树呢?

我又测试了一下官网实例,也发现了这个问题

1.改变Check状态,导致整树刷新
2.改变Select状态,仅刷新自己

选中和勾选的刷新机制,应该一致才对
test3

@liupan1890
Copy link
Author

liupan1890 commented Apr 27, 2022

codesandbox测试用例

附上测试用例

仅切换ant-design-vue v3.1.1 和 v3.2.2
然后点击 0-0-0-0-0节点的CheckBox即可复现

v3.1.1 点击后立刻切换(CPU 10%左右)
v3.2.2 点击后有一点点卡顿(CPU 26%左右)

--
期望:
1.修正v3.2.2的BUG,使点击Checkbox不卡顿,这个是v3.2版本特有BUG

2.优化Tree节点刷新策略,跟切换选中(Select)一样,仅刷新被选中的节点,而不是刷新全部节点

@github-actions
Copy link

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Apr 28, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

3 participants