浏览器FPS计算

  • 2019-07-25
  • 0
  • 0

FPS的概念随手一搜有很多,简单来讲,就是一秒钟内渲染了多少次画面。

在浏览器里面,浏览器渲染一次页面是有回调的requestAnimationFrame

那么计算FPS就是计算: 1÷两次渲染的时差,这事好办呀:


function calcFps(){ let lastTime = Date.now(); (function loop(){ const now = Date.now() const fps = Math.round(1 / ((now - lastTime) / 1000)) console.log('fps:', fps) lastTime = now requestAnimationFrame(loop) })() }

现在的实现是每次渲染都计算下FPS是多少,变化太快,我们加入更新频率:


function calcFps(debounce = 1000){ let lastTime = Date.now(); let count = 0; // 记录decounce周期内渲染次数 (function loop(){ count++ const now = Date.now() if( now - lastTime > debounce){ const fps = Math.round(count / ((now - lastTime) / 1000)) lastTime = now count = 0 console.log('fps:', fps) } requestAnimationFrame(loop) })() }
上一篇:    下一篇:

me@ccc5.cc - 衫小寨