首页 > 其他分享> > 如何统计web fps变化

如何统计web fps变化

2021-12-15 20:59:37 作者：互联网

核心知识点

requestAnimationFrame
统计一秒内的frame次数
fps → Frames Per Second

示例代码

在线地址 https://jsfiddle.net/zhangchi/1gm9a84L/14/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stat</title>
    <style>
        .fps-panel {
            background: #333;
            color: #fff;
            text-align: center;
            width: 100px;
            height: 120px;
            line-height: 120px;
        }
    </style>
</head>

<body>
    <div class="fps-panel" id="stat"></div>

    <div contenteditable="true" style="overflow:hidden;margin-top:30px; width:400px;height: 200px;border: 1px #333 solid;"/>

    <script>

        let beignTime;
        let framesCount = 0;
        let prevTime;
        function runTestUI(){
          
        }
        function stat() {

            beignTime = new Date().getTime();//启动时间
            if (!prevTime) {
                prevTime = beignTime;
            }
            //测试渲染的的代码
            runTestUI();

            framesCount++
            if (new Date().getTime() - prevTime > 1000) {
                document.getElementById('stat').innerHTML = framesCount;
                framesCount = 0;
                prevTime = new Date().getTime();
            }
            window.requestAnimationFrame(stat)
        }


        window.requestAnimationFrame(stat)
    </script>
</body>

</html>

标签：web,stat,getTime,framesCount,let,fps,new,prevTime,统计
来源： https://blog.csdn.net/terrychinaz/article/details/121961472