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

最新推荐文章于 2025-03-04 13:51:16 发布

苏一恒

最新推荐文章于 2025-03-04 13:51:16 发布

阅读量3.3k

点赞数

分类专栏：前端体系文章标签： javascript js css fps vue

本文链接：https://blog.csdn.net/HuoYiHengYuan/article/details/108810343

版权

前端体系专栏收录该内容

32 篇文章

订阅专栏

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>