HTML如何计算页面FPS_性能监测实现方法【技巧】

可通过五种方法实时监测网页FPS：一、requestAnimationFrame计算帧间隔；二、PerformanceObserver监听paint事件；三、chrome://tracing离线分析；四、performance.getEntriesByType('frame')获取帧信息；五、Canvas合成帧检测。

如果您需要实时监测网页在浏览器中的渲染帧率，以评估动画流畅度或识别性能瓶颈，则可以通过JavaScript结合浏览器提供的API来获取当前页面的FPS值。以下是实现此功能的多种方法：

一、使用requestAnimationFrame计算帧间隔

该方法基于requestAnimationFrame的回调机制，通过记录连续两帧之间的时间差，反向推算出每秒渲染帧数。其原理是requestAnimationFrame会在浏览器下一次重绘前执行回调，时间精度高且与刷新率同步。

1、定义一个全局变量lastTime用于存储上一帧的时间戳，初始值设为0。

2、定义一个frameCount变量用于累计当前秒内触发的帧数，初始值设为0。

立即学习“前端免费学习笔记（深入）”；

3、定义一个startTime变量记录当前计时周期起始时间，初始值为performance.now()。

4、编写一个循环函数，在其中调用requestAnimationFrame，并在回调中获取当前时间戳now。

5、计算当前帧与上一帧的时间差interval = now - lastTime，若interval大于0则累加frameCount。

6、当now - startTime >= 1000时，将frameCount作为当前FPS值输出，并重置frameCount为0、startTime为now。

7、更新lastTime = now，然后再次调用该循环函数。

二、利用PerformanceObserver监听paint事件

该方法依赖PerformanceObserver API监听paint条目，从中提取FP（First Paint）和FCP（First Contentful Paint）等指标，并通过统计单位时间内paint事件数量估算FPS。适用于关注页面首次渲染质量的场景。

1、创建一个新的PerformanceObserver实例，传入回调函数，观察类型设置为'paint'。

2、在回调函数中，遍历entries参数获取所有paint性能条目。

3、筛选出entryType为'paint'且name为'first-paint'或'first-contentful-paint'的条目。

4、维护一个时间窗口数组，仅保留过去1秒内发生的paint事件时间戳。

5、每次新增paint时间戳后，移除早于当前时间减1000毫秒的所有旧时间戳。

6、数组长度即为近1秒内的paint事件数，可作为粗略FPS参考值。

三、读取chrome://tracing导出的trace数据进行离线分析

该方法不适用于运行时监测，但可用于深度性能诊断。通过手动录制页面交互过程的trace文件，解析其中Category为"rendering"的FrameStart和FrameEnd事件，精确统计每秒完成的完整帧数。

1、在Chrome地址栏输入chrome://tracing，点击“Record”按钮。

2、勾选“Rendering”、“Layout”、“Paint”、“Composite”等与渲染相关选项。

标签： javascript java html js json go 浏览器 回调函数 ai win 性能瓶颈 内存占用 重绘