当前位置：网站首页>JS uses requestanimationframe to detect the FPS frame rate of the current animation in real time

JS uses requestanimationframe to detect the FPS frame rate of the current animation in real time

2022-07-25 10:03:00 【Su Yiheng】

FPS Frames per second , We have regular fps It's usually 60, Next use requestAnimationFrame To achieve fps Tested demo

Let's talk about the principle first ：
requestAnimationFrame The number of callback function executions usually matches the number of browser screen refreshes , And using this API The principle of realizing animation is to call again in the callback function requestAnimationFrame, So when the page is constantly redrawn , And then test 1 Seconds requestAnimationFrame Number of calls , It's the current FPS

window.requestAnimationFrame() Tell the browser —— You want to perform an animation , It also requires the browser to invoke the specified callback function before updating the animation next time . This method needs to pass in a callback function as a parameter , This callback function will execute before the next redraw of the browser

Be careful ： If you want to update the next frame of animation before the browser redraw next time , Then the callback function itself must call... Again 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)
      }
    }
    //  Output current frames per second 
    setInterval(() => {
    
      console.log(frame)
      frame = 0
    }, 1000)
    requestAnimationFrame(animationHeight)
  }

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

It's just a simple DEMO The idea of , In fact, there are many details that have not been taken into account , Specifically, it should be improved according to your business scenario .

原网站

版权声明
本文为[Su Yiheng]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/206/202207250922119603.html

边栏推荐

猜你喜欢

随机推荐