这是一个创建于 874 天前的主题，其中的信息可能已经有所发展或是发生改变。
代码
<div id="box">
<div class="device" />
<div class="device" />
<div class="device" />
<div class="device" />
.....
</div>
问题
- #box 使用了相对定位, 需要鼠标拖动, 通过修改 left/top 实现,
- .device 数量很多, 50+到 500 个不等, 隐藏所有.device 时候, 拖动很流畅, 如果显示则拖动有明显的卡顿(.device 使用绝对定位)
有啥性能优化建议吗?
 |
1
makelove 2021-11-26 11:58:58 +08:00  1
transform 配 translateX/Y 也能定位，性能要更好。其中 3d 版会用硬件加速，可以先试非 3d 版不行再换 3d 版
|
 |
2
renmu123 2021-11-26 12:09:23 +08:00 via Android 2
box 改绝对定位，修改 left 变成修改 transform ，性能应该高上一点，再加个 will-change 试试看
|
 |
3
des 2021-11-26 12:20:13 +08:00 via iPhone 1
试试经典的 transformZ(0) ？
|
 |
4
thinkershare OP OK, 我先试一试, 感谢给位大大
|
|
5
thinkershare OP 1
问题已经解决: 使用 transformZ(0)联合 will-change:transform, CPU 占用就下降了, 一切工作正常
|
|
6
thinkershare OP 发现数据多了还是不行, 看来只能换成 canvas
|
Select Language