1. 前言

最近在研究 react 源码（v16.8）的过程中，发现 react 使用了 requestAnimationFrame 和 requestIdleCallback 这两个 api。同时，这两个 api 与 浏览器的 fps 存在着关系。

2. 浏览器的 fps

2.1. fps 是什么？

首先介绍一下一些名词的含义

fps 全称为 Frames Per Second，即 每一秒的帧数。我们在显示器上看到的各种各样的动画效果，都是由一帧一帧组成的。可以将 fps 理解为动画播放的速度。fps 越大，动画越流畅。

一般浏览器的 fps 为 60。当然，如果你的显示器的刷新率能够达到 144 hz 的话，浏览器的 fps 可以达到 144 fps

那什么是刷新率呢？屏幕的刷新率 是指 屏幕每秒能够显示图像的次数，单位为 hz（赫兹）。

fps 的值受限于屏幕的刷新率，即 fps 的值小于等于屏幕刷新率的值。

总结：浏览器的 fps 指浏览器每一秒的帧数。fps 越大，每秒的画面就越多，浏览器的显示就越流畅。浏览器的 fps 一般等于屏幕的刷新率，不会超过屏幕的刷新率。

3. requestAnimationFrame()

先看一下 MDN 上对 requestAnimationFrame() 的定义：

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
当你准备更新动画时你应该调用此方法。这将使浏览器在下一次重绘之前调用你传入给该方法的动画函数(即你的回调函数)。回调函数执行次数通常是每秒60次，但在大多数遵循W3C建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配

var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate');
element.style.position = 'absolute';

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.left = Math.min(progress / 10, 200) + 'px';
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);

原文：https://segmentfault.com/a/1190000021378643

链接: https://fly63.com/article/detial/7010