如何统计web fps变化

最新推荐文章于 2024-04-23 15:27:16 发布

泰瑞_

最新推荐文章于 2024-04-23 15:27:16 发布

阅读量393

点赞数 1

CC 4.0 BY-SA版权

分类专栏：软件研发文章标签：前端 css3 css

本文链接：https://blog.csdn.net/terrychinaz/article/details/121961472

软件研发专栏收录该内容

663 篇文章

订阅专栏

本文介绍如何使用requestAnimationFrame API来精确统计页面渲染的帧数，并通过实例演示如何计算Frames Per Second (FPS)。关键在于实时更新 fps 指标，帮助开发者监控和优化网页动画效果的流畅度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

核心知识点

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>