将 offsettop 的读取拆分到长任务中，核心做法是利用 requestanimationframe 或 settimeout 将 dom 读取操作推迟到下一帧渲染前执行。这样做的目的是避免在 javascript 执行期间强制触发浏览器的重排（reflow），从而保证主线程的流畅性。具体实现时，只需把原本同步获取 element.offsettop 的代码包裹在回调函数中，并交由上述 api 调度即可。

为什么同步读取 offsetTop 会阻塞主线程

同步读取 offsetTop 会导致浏览器立即计算布局，产生性能瓶颈。

const element = document.getElementById('target');
// 强制触发重排
const top = element.offsetTop;
console.log(top);

如何异步拆分 offsetTop 读取

使用 requestAnimationFrame 将读取操作推迟到下一帧。

JavaScript 测试模式

使用 Jest、Vitest 和 Testing Library 实施全面的测试策略，包括单元测试、集成测试和端到端测试，涵盖模拟、测试夹具和测试驱动开发。在编

下载

const element = document.getElementById('target');
requestAnimationFrame(() => {
  const top = element.offsetTop;
  console.log(top);
});

基于 requestAnimationFrame 回调中读取的具体问题

在 requestAnimationFrame 回调中读取 offsetTop 是安全的，因为此时浏览器已完成上一帧的样式计算和布局更新。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南