为什么requestIdleCallback给我超过16毫秒的时间

Question

我认为我们的代码大约需要16ms的执行时间,因为渲染率是60 fps,所以1000/60 = ~16ms.但是,如果我在Chrome中运行此功能:

requestIdleCallback((deadline)=>{
    console.log(deadline.timeRemaining(), deadline.didTimeout)
});

timeRemaining给了我49.9ms时间.这是否意味着Chrome不会每16毫秒重新渲染一次？我认为在这种情况下确实如此,如果没有任何变化,则无需重新渲染.

Answer 1

该规范支持您的假设。在启动空闲期算法中，它说：

7. 令截止时间为未来的某个时间，在此之前浏览器将保持空闲状态。用户代理应该选择截止时间，以确保即使回调在从现在到截止时间的整个时间段内运行，时间关键的任务也不会被延迟。因此，应将其设置为以下最小值： 通过 setTimeout 和 setInterval 设置的活动计时器列表中最接近的超时；通过 requestAnimationFrame 发布的待处理动画回调的预定运行时间；待处理的内部超时，例如开始渲染下一帧的最后期限、处理音频或用户代理认为重要的任何其他内部任务。

（我的重点）

因此，如果存在渲染下一帧的内部挂起超时，则截止日期必须在此之前。