浏览器页面渲染性能问题优化

thinkershare · 2021-11-26T03:42:18Z

代码 ..... 问题 #box 使用了相对定位, 需要鼠标拖动, 通过修改 left/top 实现, .device 数量很多, 50+到 500 个不等, 隐藏所有.device 时候, 拖动很流畅, 如果显示则拖动有明显的卡顿(.device 使用绝对定位) 有啥性能优化建议吗?

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

This topic created in 1622 days ago, the information mentioned may be changed or developed.

代码

<div id="box">
	<div class="device" />
    <div class="device" />
    <div class="device" />
    <div class="device" />
    .....
</div>

#box 使用了相对定位, 需要鼠标拖动, 通过修改 left/top 实现,
.device 数量很多, 50+到 500 个不等, 隐藏所有.device 时候, 拖动很流畅, 如果显示则拖动有明显的卡顿(.device 使用绝对定位)

有啥性能优化建议吗?

6 replies

makelove

Nov 26, 2021

transform 配 translateX/Y 也能定位，性能要更好。其中 3d 版会用硬件加速，可以先试非 3d 版不行再换 3d 版

renmu123

Nov 26, 2021 via Android

box 改绝对定位，修改 left 变成修改 transform ，性能应该高上一点，再加个 will-change 试试看

des

Nov 26, 2021 via iPhone

试试经典的 transformZ(0) ？

thinkershare

Nov 26, 2021

OK, 我先试一试, 感谢给位大大

thinkershare

Nov 26, 2021

问题已经解决: 使用 transformZ(0)联合 will-change:transform, CPU 占用就下降了, 一切工作正常

thinkershare

Jan 7, 2022

发现数据多了还是不行, 看来只能换成 canvas