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

2021-11-26 11:42:18 +08:00
 thinkershare

代码

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

问题

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

有啥性能优化建议吗?

835 次点击
所在节点    问与答
6 条回复
makelove
2021-11-26 11:58:58 +08:00
transform 配 translateX/Y 也能定位，性能要更好。其中 3d 版会用硬件加速，可以先试非 3d 版不行再换 3d 版
renmu123
2021-11-26 12:09:23 +08:00
box 改绝对定位，修改 left 变成修改 transform ，性能应该高上一点，再加个 will-change 试试看
des
2021-11-26 12:20:13 +08:00
试试经典的 transformZ(0) ？
thinkershare
2021-11-26 12:27:53 +08:00
OK, 我先试一试, 感谢给位大大
thinkershare
2021-11-26 13:40:37 +08:00
问题已经解决: 使用 transformZ(0)联合 will-change:transform, CPU 占用就下降了, 一切工作正常
thinkershare
2022-01-07 13:39:44 +08:00
发现数据多了还是不行, 看来只能换成 canvas

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/818117

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX