时间戳

首页 > 解决方案 > 在每帧 rAF 之前运行任务的可靠方法

javascript - 在每帧 rAF 之前运行任务的可靠方法

问题描述

我偶然发现了Paul Irish 发布的一篇文章——requestAnimationFrame Scheduling For Nerds 。

我通读了一遍，然后提出一个问题，我们有什么办法可以安排一个任务，在每一帧的 rAF 之前运行（见附图）？

框架的寿命

标签： javascriptbrowserrequestanimationframe

解决方案

首先，Chrome 和 Firefox 在布局和绘制之前运行 rAF，保罗在他的文章中解释了这一点。Safari 和 IE有不同的行为，Edge 正在修复；

现在让我们回到你的问题；考虑在每一帧的 rAF 回调之前，有一种方法可以让 JS（我的任务）运行一点平静。假设“我的任务”执行需要约 4 毫秒，而您的 rAF 回调需要约 5 毫秒才能在每一帧中完成。这将是大约 9 毫秒的 JS 执行时间。那么这里有什么意义呢？我们可以在大约 9 毫秒内运行 rAF 回调中的所有内容，换句话说，这相当于延长 rAF 执行的长度：

帧前的总 JS 执行 = 我的任务代码执行 + 常规 rAF 代码执行

我们可以在 rAF 内部执行所有 Frame Critical JS 执行；将 JS 执行分为两部分（我的任务 + rAF）是没有意义的，因为在 Layout 和 Paint 之前执行rAF（JS 代码）的时间不超过 10 毫秒，如果我们超过 fps 下降，我们会看到卡顿；

TL：博士；除了 rAF 回调之外，没有其他方法可以在关键时刻执行 js :)

推荐阅读