offsetTop为啥会影响性能?

offsetTop 是一个只读属性，它返回元素的顶部相对于其包含块（通常是最近的已定位祖先元素）的偏移量。当在一个页面中频繁或大量使用 offsetTop 来获取元素的位置时，可能会影响性能，主要原因如下：

1. 强制同步布局 (Layout Thrashing)

每当访问 offsetTop 或其他与布局相关的属性（如 offsetLeft, offsetWidth, offsetHeight, clientTop, clientLeft, scrollTop, scrollLeft, getBoundingClientRect() 等），浏览器必须确保它拥有最新的布局信息。这意味着浏览器可能会强制进行同步布局计算，即使这些计算在当前的 JavaScript 执行上下文中不是必要的。

如果在同一任务中先修改了DOM样式，然后紧接着就去读取 offsetTop，那么浏览器会立即重新计算布局以提供准确的数据。这种模式被称为 "layout thrashing"，即反复触发不必要的布局重排，这会对性能产生负面影响，尤其是在复杂页面上。

2. 布局抖动

连续地读取和写入导致布局变化的属性也会造成所谓的“布局抖动”。例如，如果你在一个循环里不断地读取 offsetTop 并根据结果调整样式，每一次读取都会引起一次完整的布局计算，这将极大地降低性能。

3. 浏览器优化限制

现代浏览器通常会对布局计算进行一定的优化，比如批量处理多个样式更改后再一次性重新计算布局。然而，一旦开发者直接请求了一个依赖于最新布局信息的属性，浏览器就必须放弃这些优化并即时更新布局，从而降低了效率。

如何避免性能问题

缓存值：如果你需要多次使用同一个元素的 offsetTop 值，考虑将其存储在一个变量中，而不是每次都重新查询。
批处理操作：尽量减少在短时间内对 DOM 的读写次数，尝试将所有必要的读取放在一起来做，同样地，所有的写入也应尽可能一起完成。
使用 requestAnimationFrame：对于那些需要在每一帧都获取最新布局信息的情况，可以利用 requestAnimationFrame API 来确保你的代码是在下一次屏幕刷新之前被执行，这样可以更好地配合浏览器的渲染流程。
虚拟化长列表：如果是由于滚动事件或者其他频繁发生的用户交互而不断触发 offsetTop 的读取，考虑实现虚拟滚动或其他形式的内容懒加载来减少不必要的计算。

通过遵循上述建议，你可以有效地减轻因频繁使用 offsetTop 而带来的性能负担。

__EOF__

本文作者：龙陌
本文链接：https://www.cnblogs.com/longmo666/p/18620123.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！