为什么大多数浏览器帧时间为空，但帧仍然需要超过16毫秒

Question

我尝试制作帧速率低于16ms的动画。对于许多帧我得到了这种模式：

框架的大部分是空的。黄色是我的requestAnimationFrame脚本，然后渲染和绘制。但是，为什么这只需要一小部分帧时间，那么帧仍然接近20ms？

以下是一些演示它的代码：

var square = document.getElementById('square');

document.addEventListener('mousemove', function(e) {
    square.style.top = e.clientY - 25 + 'px';
  square.style.left = e.clientX - 25 + 'px';
});

小提琴：https://jsfiddle.net/5peLpf53/

小提琴的时间轴截图：

Answer 1

大多数（如果不是全部）浏览器最高运行速度为60 fps。这与每16.6 ms一次相同。没有必要更高，因为许多监视器不高于60赫兹。

requestAnimationFrame只是告诉浏览器在下次重新绘制屏幕之前运行一些代码。您无法以更快的速度更新屏幕。

如果你有一些需要更频繁更新的逻辑，那么你应该把它放在其他地方。