当前位置：网站首页>js利用requestAnimationFrame实时检测当前动画的FPS帧率

js利用requestAnimationFrame实时检测当前动画的FPS帧率

2022-07-25 09:24:00 【苏一恒】

FPS每秒传输帧数，我们常规的fps一般是60，接下来利用requestAnimationFrame来实现fps检测的demo

先说下原理：
requestAnimationFrame的回调函数执行次数通常与浏览器屏幕刷新次数相匹配，而利用这个API实现动画的原理就是回调函数内再次调用requestAnimationFrame，所以页面不断重绘时，然后检测1秒内requestAnimationFrame调用的次数，就是当前的FPS

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行

注意：若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用window.requestAnimationFrame()

——MDN

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
    
            background: #1890ff;
            border: 1px solid crimson;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<div id="div"></div>
</body>
<script>
  let num = 0
  let height = 0
  let frame = 0
  window.onload = () => {
    
    let animationHeight = () => {
    
      document.getElementById('div').style.height = (++height) + 'px'
      if (height < 1000) {
    
        frame++
        requestAnimationFrame(animationHeight)
      }
    }
    // 每秒钟输出当前帧数
    setInterval(() => {
    
      console.log(frame)
      frame = 0
    }, 1000)
    requestAnimationFrame(animationHeight)
  }

</script>
</html>
0Pwlh6.png

这只是个简单的DEMO的思路，其实还有很多细节情况没有考虑到，具体还是要根据你的业务场景进行改进。

原网站

版权声明
本文为[苏一恒]所创，转载请带上原文链接，感谢
https://blog.csdn.net/HuoYiHengYuan/article/details/108810343

边栏推荐

猜你喜欢

随机推荐