假设浏览器渲染为60 fps是否安全

Is it safe to assume 60 fps for browser rendering?

本文关键字：fps 是否 安全 浏览器 假设      更新时间：2023-09-26

我想用requestAnimationFrame()制作一个需要5秒才能完成的JavaScript动画。

我不想要严格而精确的计时，所以任何接近5秒的时间都可以，我希望我的代码简单可读，所以这样的解决方案对我来说不起作用。

我的问题是，假设大多数浏览器以60帧/秒的速度渲染页面是否安全？即，如果我希望我的动画需要5秒才能完成，我会将其划分为60*5=300个步骤，每次使用requestAnimationFrame()调用函数draw()时，绘制动画的下一个步骤。（考虑到动画非常简单，只需移动一个彩色div即可。）

顺便说一下，我不能使用jQuery。

编辑：让我用这种方式重新表述这个问题：是否所有浏览器都"正常"尝试以60帧/秒的速度渲染页面？我想知道Chrome是以每秒75帧的速度渲染，还是Firefox以每秒70帧的速度呈现。

（正常情况：CPU负载不高，RAM未满，没有存储故障，房间通风良好，没有人试图把我的笔记本电脑扔出窗外。）

依赖每秒60帧是非常不安全的，因为浏览器并不总是处于相同的条件下，即使它试图以尽可能高的fps渲染页面，处理器/cpu/gpu总是有可能忙于做其他事情导致fps下降。

如果你想依赖FPS（尽管我不建议你这样做），你应该首先检测当前的FPS，并调整每帧动画帧的速度。这里有一个例子：

var lastCall, fps;
function detectFps() {
    var delta;
    if (lastCall) {
        delta = (Date.now() - lastCall)/1000;
        lastCall = Date.now();
        fps = 1/delta;
    } else {
        lastCall = Date.now();
        fps = 0;
    }
}
function myFunc() {
    detectFps();
    // Calculate the speed using the var fps
    // Animate...
    requestAnimationFrame(myFunc);
}
detectFps(); // Initialize fps
requestAnimationFrame(myFunc); // Start your animation

这取决于GPU和显示器的组合。我有一个很好的GPU和一个120赫兹的显示器，所以它以120帧/秒的速度渲染。在渲染过程中，如果我移动到60赫兹监视器，它将以60帧/秒的速度达到最大值。

另一个发生在某些浏览器/OS中的因素是使用iGPU而不是离散gpu。

正如其他人已经说过的，它不是。

但是，如果您需要在大约5秒内结束动画，并且不错过动画中的任何帧并不重要，则可以使用旧的setTimeout（）方法。这样，你可能会错过几毫秒的目标，并且由于fps不匹配，动画中的一些帧将被跳过（而不是渲染），但这可能是一个"足够好"的解决方案，尤其是如果你的动画像你所说的那样简单，用户甚至可能看不到故障。

假设每个人都能处理动画是不安全的。

人们会有不同的需求。

很多常见的动画和常见的网页设计实践都会让我患上严重的偏头痛，所以我将浏览器设置为每秒1帧，以在不引起太多快速闪烁的情况下杀死动画。

相关文章：