通过 requestanimationframe 将读取操作拆分到下一帧，避免阻塞当前渲染。具体做法是在长任务中调用 requestanimationframe，在回调中执行 window.pageyoffset 读取并处理结果。

requestAnimationFrame 如何触发重排

使用 requestAnimationFrame 可以将代码推迟到浏览器下一次重绘前执行，从而让出主线程控制权。这能有效防止长任务导致的页面卡顿。

function splitRead() {
  // 模拟长任务
  for (let i = 0; i  {
    const y = window.pageYOffset;
    console.log('Page Y Offset:', y);
  });
}

直接读取与异步读取的性能差异

直接读取 pageYOffset 会强制浏览器同步计算布局，而异步读取则允许浏览器合并样式计算和布局更新。这种差异在处理大量 DOM 元素时尤为明显。

javascript-typescript-typescript-scaffold

你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型

下载

// 直接读取（可能阻塞）
const y1 = window.pageYOffset;

// 异步读取（非阻塞）
requestAnimationFrame(() => {
  const y2 = window.pageYOffset;
});

多次读取时的性能优化策略

当需要多次读取 pageYOffset 时，应尽量减少读取次数，并将所有读取操作集中在一个 requestAnimationFrame 回调中。这样可以避免多次触发重排，提升性能。

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