如何使用 JavaScript 获取当前页面帧率 FPS

可以通过计算每秒 window.requestAnimationFrame 的调用频率来做为 FPS 值。它接收一个回调函数，该回调函数会在浏览器下一次重绘之前执行。所以只要我们循环调用并记录单位时间内的调用次数就能计算当前页面的帧率了。

（放个测试动画，使帧率产生波动方便查看效果，点击下方按钮可调节当前动画性能开销）

效果展示

当前FPS：

实现代码

html:


            <p>当前FPS：<span id="fps"></span></p>

js:


            let last = Date.now();
            let ticks = 0;
            //循环调用 requestAnimationFrame
            function rafLoop(timestamp) {
                ticks += 1;
                //每30帧统计一次帧率
                if (ticks >= 30) {
                    const now = Date.now();
                    const diff = now - last
                    const fps = Math.round(1000 / (diff / ticks));
                    last = now
                    ticks = 0
                    renderFps(fps);// 刷新帧率数值
                }
                requestAnimationFrame(rafLoop);
            }

            let fpsEl = document.getElementById('fps');
            //显示帧率数值到界面上
            function renderFps(fps) {
                fpsEl.textContent = fps;
            }

            //开始执行
            rafLoop();