requestAnimationFrame 及其生命周期

Question

我意识到我对

requestAnimationFrame

感到困惑，尽管不久前我以为我理解它是如何工作的。

那么我的问题的本质是什么：

他们说

requestAnimationFrame

，即它的回调，将在渲染阶段之前被调用，也就是说，调用

requestAnimationFrame

并不意味着浏览器将立即执行传递给它的回调函数。

但是，如果我们采用这段代码：

const run = () => {
  requestAnimationFrame((timeStamp) => {
    console.log(timestamp);
    requestAnimationFrame(run);
  })
};
run();

如果我们在一个完全空的页面上运行，我们将看到如何在控制台中打印时间戳，但是为什么如果页面完全空，就没有理由渲染。原因是什么？

好吧，我们看一下规范，它说你需要等待rendering opportunity才能开始渲染相关的任务，这里就会出现我们的

requestAnimationFrame

。但由于缺乏渲染机会的原因，上面的代码不应该被打印。或者说存在什么原因吗？

需要解释。

Answer 1

如果您正在渲染一个完全空白的页面，那么您仍然在渲染。事实上，您可以运行任何 JavaScript 代码，甚至调用“run”函数，这意味着页面已呈现。