标签: requestanimationframe

requestAnimationFrame每当屏幕准备好重绘时调用。在现代屏幕上，刷新率可能比每秒 60 帧高很多。如果在这些调用中发生了很多事情 - 它可能会影响应用程序的整体性能。

所以我的问题是：应该requestAnimationFrame总是被限制到 60FPS 吗？人眼真的能分辨出 16ms 和 8ms 重绘延迟之间的区别吗？

[更新] 为了在高刷新率的屏幕上获得更高的性能，我最终将其限制为 60FPS。并且会向在 rAF 呼叫中有很多事情要做的每个人建议这种方法。当然，您应该自己进行测试。

例如，如果我做类似的事情

requestAnimationFrame(function() {
    el.appendChild(otherEl)
    el.appendChild(anotherEl)
    anotherEl.removeChild(someOtherEl)
    anotherEl.appendChild(yetAnotherEl)
})

在我们试图避免导致重绘/回流的时候，这是否会导致（同步？）重绘/回流发生，从而使目的无效requestAnimationFrame？

或者，浏览器是否会智能并等到该帧完成后（在所有这些 DOM 操作完成后）才能最终绘制生成的 DOM 结构？

哪些事情会导致重绘/回流，以及我们希望在 requestAnimationFrame 中避免做的事情？

这篇 html5rocks 文章中的样式列表仅提到（我认为）在修改它们时会导致重绘/回流的样式。我也很想知道哪些 JavaScript 属性（以及它们在哪个对象上）在被访问时会导致回流（即发生回流是为了能够获得某个属性的值）。

如果某个函数被传递到requestAnimationFrame()，该函数如何检测到它正在动画帧内被调用？

铁

function someFunction() {
  if (/* What goes here? */) {
    console.log('Inside animation frame.')
  }
  else {
    console.log('Not inside animation frame.')
  }
}

// The following lines should not be modified for the answer.
someFunction() // logs "Not inside animation frame."
requestAnimationFrame(someFunction) // eventually logs "Inside animation frame."

最后两行不应修改。我很想知道是否可以检测到这种情况，而不需要用户记住以两种不同的方式使用该功能。最终用户应该像平常一样使用该函数，而不知道我的函数检测到用例。

document.querySelector('#ontime').onclick = function() {
    setTimeout(() => {
        window.open('https://www.google.com');
    }, 1000);
};

当用户点击超时 <= 1000ms（或 a Promise.resolve().then(...)）后使用 window.open 时，它不会被浏览器阻止。

如果您使用超时> 1000ms 或 执行相同操作requestAnimationFrame，则弹出窗口将被阻止。

单击下面的链接可以获取包含 4 个案例的完整示例： https: //jsfiddle.net/kouty79/rcwgbfxy/

有人知道为什么吗？有相关文档或 w3c 规范吗？

我要实现的是检测屏幕上出现某些更改的准确时间（主要是使用Google Chrome浏览器）。例如，我使用显示项目$("xelement").show();或使用进行更改$("#xelement").text("sth new");，然后我想查看Performance.now（）到底是什么，当更改以给定的屏幕重新绘制出现在用户的屏幕上时。因此，我完全可以接受任何解决方案-在下文中，我主要指的是requestAnimationFrame（rAF），因为这是应该帮助实现此功能的函数，只是似乎没有实现。见下文。

基本上，正如我所想象的，rAF应该在0-17毫秒内执行其中的所有操作（每当下一帧出现在我的标准60 Hz屏幕上）。此外，timestamp参数应提供此执行时间的值（并且该值基于与performance.now（）相同的DOMHighResTimeStamp度量）。

现在，这是我为此进行的众多测试之一：https : //jsfiddle.net/gasparl/k5nx7zvh/31/

function item_display() {
    var before = performance.now();
    requestAnimationFrame(function(timest){
        var r_start = performance.now();
        var r_ts = timest;
        console.log("before:", before);
        console.log("RAF callback start:", r_start);
        console.log("RAF stamp:", r_ts);
        console.log("before vs. RAF callback start:", r_start - before);
        console.log("before vs. RAF stamp:", r_ts - before);
        console.log("")
    });
}
setInterval(item_display, Math.floor(Math.random() * (1000 - 500 + 1)) + 500);

我在Chrome中看到的是：rAF内的函数总是在大约0到3毫秒内执行（从紧接其前的performance.now（）开始），最奇怪的是，rAF时间戳与我得到的完全不同rAF内的performance.now（）通常比在rAF 之前调用的performance.now（）早大约0-17毫秒（但有时在之后0-1毫秒）。

这是一个典型的例子：

before: 409265.00000001397
RAF callback start: 409266.30000001758
RAF stamp: 409260.832 
before …

我的 rust 程序正在管理 2d html canvas 上下文的内存，我试图达到 ~60fps。我可以很容易地计算出每帧之间的增量，结果大约是大约 5 毫秒。

我不清楚如何让我的 Rust webassembly 程序在剩余的 11 毫秒内进入睡眠状态。一种选择是让 JavaScript 在每个上调用 RustrequestAnimationFrame并将其用作驱动程序，但我很想尽可能将其全部保留在 Rust 中。

setTimeout(renderNext, 11)在编译到 wasm 目标时，我正在有效地寻找与 JavaScript 等效的 Rust 。

请随意指出我的以下理解是否错误：假设我们的显示刷新率为60hz（我知道情况并非总是如此，但我们假设它是60hz），那么网页将每秒刷新屏幕60次，如果一切顺利。这意味着渲染以 16 毫秒的间隔（大约）发生，对吗？因此，我们的 JavaScript 中执行时间超过 16 毫秒的任何内容都会给用户带来卡顿的体验。所以我的问题是：

1. 假设我们有一个函数handleScroll，从开始到结束执行需要 100 毫秒。我们将其添加到addEventListener('scroll', handleScroll). 每当事件触发时，由于渲染周期中跳过/丢弃6 帧，scroll用户是否会遇到卡顿体验？因为 100 毫秒 / 16 毫秒 = 6.25？我知道一个任务在主线程上花费很长时间，它会停止所有其他任务直到完成，但在这里我想获得一些定量分析或定性分析方法来解决此类性能问题。具体来说，我想了解（粗略地）这样的回调会丢失多少帧（如果刷新率为 60hz）
2. 我认为requestAnimationFrame告诉浏览器在渲染下一帧之前运行回调，所以我看到人们提到它可以防止动画丢帧。但我不清楚它会如何帮助解决这个问题，因为我们传入的回调requestAnimationFrame仍然会运行完成，所以如果回调花费超过 16 毫秒，我们将不可避免地错过下一帧，对吗？