[Optimize] [App] 列表树展开和点击key时卡顿，优化树状结构展示性能

[tzfun]

1.0.1版本客户端展开节点，查看key对应值时有卡顿，网页版正常，很流畅.

MacOS 14.6.1
m1 pro芯片.

Originally posted by @AGou-ops in #26 (comment)

[tzfun]

@AGou-ops 我在mac x86 和 aarch环境都试过体验还好，你的etcd是存储了很多key吗？可否录一个对比视频

[AGou-ops]

> etcdctl  --endpoints https://127.0.0.1:2379 get "" --prefix --keys-only | grep -v '^$' | wc -l
    1172

就一千多点的key吧.

CleanShot.2024-09-11.at.16.23.56.mp4

不知道光看视频能不能看出来，体验上差别还是挺大的，网页流畅不少.
@tzfun

edit: 都是快速点按的.

[tzfun]

你这里的卡顿是指展开的一瞬间卡顿还是点击key之后显示value的时候卡顿？

[AGou-ops]

展开卡顿，显示value也卡顿.

[tzfun]

OK，我后面做一下性能测试，下个版本尝试优化一下。初步判断可能有以下几个原因：

1. web server和app所处位置不同，连接etcd server的响应时间也会有所不同
2. app的树状结构动画更多导致页面更卡
3. app和web前端的框架不一样，app是vuetify，web是element-plus，它们底层的渲染机制不一样也有可能有细微差异，不过这一点我优化的空间不大，只能持续关注UI库的更新动向做调整。
4. 树状结构一次性载入全部的key导致展开卡顿，尝试在下个版本优化掉

[tzfun]

已发布 App-1.0.3 优化App性能，测试拉取40000条数据也是ok的，性能较上个版本有较大提升，但UI体验有所下降

[AGou-ops]

用了下性能确实好了不少，没有卡顿了，格式化也没问题，赞.👍🏻

[tzfun]

用了下性能确实好了不少，没有卡顿了，格式化也没问题，赞.👍🏻

感谢支持🙏🏻