JS动画FPS性能优化

转载：http://zhangchen915.com/index.php/archives/675/

 

当机器性能不足以维持高帧数渲染时，一个较低的稳定的帧数相比不断在60帧上下波动能带来更好的体验。所以在一些动画交互较多的场景，有必要限制渲染帧数。

class AnimationFrame {
constructor(fps = 60, animate) {
this.requestID = 0;
this.fps = fps;
this.animate = animate;
}

start() {
let then = performance.now();
const interval = 1000 / this.fps;
const tolerance = 0.1;

const animateLoop = (now) => {
this.requestID = requestAnimationFrame(animateLoop);
const delta = now - then;

if (delta >= interval - tolerance) {
then = now - (delta % interval);
this.animate(delta);
}
};
this.requestID = requestAnimationFrame(animateLoop);
}

stop() {
cancelAnimationFrame(this.requestID);
}
}
requestAnimationFrame永远以60FPS运行，也就是每16.6ms执行一次，以我们要限制在10FPS（100ms）为例。递归7次时116.2ms>100ms，我们再执行下一次渲染。为了避免误差导致整体帧数低于设置，这里不能直接使用then = now，而是 then = now - (delta % interval)。

参考文章：
Controlling the Frame Rate with requestAnimationFrame

作者：海屿
原文地址：zhangchen915.com