为何AWS Lambda中Puppeteer渲染动画速度快于实时且随视口增大变快？

成因 #

该现象本质是无头Chrome的动画计时优化机制导致的：
Chrome默认会将动画时间线与真实时间脱钩，当单帧渲染耗时高于帧间隔时，浏览器会主动加快动画时钟推进速度、跳过中间帧，避免动画永远落后于预设进度。视口越大，单帧渲染的计算量越高，时钟推进的幅度就越大，最终表现为视口越大动画整体播放速度越快。
你当前基于Node.js本地时钟定时截图的逻辑，和浏览器内部被加速的动画时间线不同步，因此会出现动画提前播放完毕、后续截图都是静态最终帧的问题。

解决方案 #

方案1：调整启动参数禁用计时节流 #

启动Puppeteer时添加以下参数，强制动画时间与真实时间1:1对齐，禁用浏览器的自动优化逻辑：

const browser = await puppeteer.launch({
  args: [
    '--disable-raf-throttling',
    '--animation-duration-scale=1',
    '--disable-background-timer-throttling',
    '--disable-backgrounding-occluded-windows',
    '--disable-renderer-backgrounding'
  ]
});

方案2：截图逻辑与浏览器渲染帧对齐 #

不要使用Node.js侧的setInterval定时截图，改为和浏览器的requestAnimationFrame触发时机绑定，确保每次截图都对应浏览器刚完成一帧渲染的时间点：

// 向浏览器注入截图回调
await page.exposeFunction('captureFrame', async () => {
  return page.screenshot({ omitBackground: true });
});

// 在浏览器侧按动画帧节奏触发截图
const frames = await page.evaluate(async (totalFrames) => {
  const result = [];
  for (let i = 0; i < totalFrames; i++) {
    await new Promise(resolve => requestAnimationFrame(resolve));
    result.push(await window.captureFrame());
  }
  return result;
}, 100);

方案3（最稳定）：手动控制动画进度逐帧截图 #

如果你的动画使用CSS动画或Web Animations API实现，可以直接跳过浏览器自动播放逻辑，手动控制动画进度到对应时间点后截图，完全不受渲染性能、视口大小影响：

for (let frameIndex = 0; frameIndex < 100; frameIndex++) {
  // 计算当前帧对应的动画时间点，25fps对应每帧间隔40ms
  const currentTime = frameIndex * 40;
  // 批量设置页面所有动画的进度
  await page.evaluate((time) => {
    document.getAnimations().forEach(anim => {
      anim.currentTime = time;
      anim.pause();
    });
  }, currentTime);
  // 截图
  const frame = await page.screenshot({ omitBackground: true });
  // 存储帧的逻辑
}

内容的提问来源于stack exchange，提问作者PadawanQ