这是一个创建于 1086 天前的主题，其中的信息可能已经有所发展或是发生改变。
这个问题我之前提过 原问题 , 本来最初以为解决了, 现在上了生产环境, 发现还是有性能问题, 看看大家有没有什么优化意见, 代码大概如下所示, box 内有 1000 个左右的设备组件, 需要鼠标点击时拖动 box, box 目标使用了相对定位, 然后使用 3d 变形来实现移动元素, device 组件都绝对定位, 他们都有自己的 x,y 坐标位置, 发现即便使用 3D, device 太多的时候, 整个拖动会导致 CPU 100%, 然后就会明显的不跟手, 我研究了几天, 发现各种优化方案都不行, 最后决定在拖动时候隐藏所有 device 组件, v-show 的隐藏仍然会卡, v-if 的隐藏不会卡顿, 但是 v-if 在隐藏后重新显示却需要消耗 2s, 这样体验就会特别差, 想问问大家的建议
<div class="box">
<device v-for="device in devices" :data="device" :key="device.id" />
</div>
 |
1
KouShuiYu 2022-01-07 18:27:37 +08:00
你需要添加一个复现的 DEMO
https://codepen.io/ |
 |
2
thinkershare OP @KouShuiYu 嗯, 我晚上回去试一试, 可能有点麻烦, 要 100%重现, 因为 device 这个组件非常复杂, 否则我就直接迁移到 canvas 上去了
|
 |
3
walpurgis 2022-01-07 19:13:44 +08:00 via iPhone
能上虚拟列表么
|
|
4
thinkershare OP @walpurgis 不能的哦, 因为这是地图, 大小是 8000*8000 像素左右, 需要监控所有设备
|
|
5
walpurgis 2022-01-07 20:51:36 +08:00
地图啊，可以考虑使用点聚合方案
参考百度地图实现 https://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/conflux |
 |
6
learnshare 2022-01-07 21:16:37 +08:00
8000px^2 ，以及 1000 个独立设备，估计 DOM 渲染性能跟不上
Canvas 渲染肯定很有效，但做起来更复杂 |
|
7
thinkershare OP [代码地址]( http://dlsmartlink.com/test.zip), 需要使用 npm install 安装下依赖, 然后 npm run dev 就可以了
|
|
8
thinkershare OP @learnshare 我研究了几天, 发现和事件有关系, 不绑定事件 2000 个 device 拖动我明显丢帧, 看来只能抛弃组件, 使用观察者模式优化事件监听
|
Select Language