可通过五种方法实时监测网页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”等与渲染相关选项。
3、开始录制后执行目标操作，完成后点击“Stop”并保存trace.json文件。
4、使用脚本读取trace.json，过滤出ph字段为”B”且cat包含”rendering”且name为”FrameStart”的事件。
5、匹配对应ph为”E”且name为”FrameEnd”的事件，确保ts与dur字段构成完整帧周期。
6、按时间戳分组，统计每1000ms区间内有效帧的数量，得出各时段FPS分布。
四、使用window.performance.getEntriesByType获取帧信息
部分新版Chrome支持通过performance.getEntriesByType(‘frame’)获取帧性能条目，每个条目包含duration字段，表示该帧持续时间，据此可计算瞬时FPS。
1、检查浏览器是否支持frame类型的performance entry：if (‘getEntriesByType’ in performance && performance.getEntriesByType(‘frame’).length > 0)。
2、调用performance.getEntriesByType(‘frame’)获取最近若干帧数据。
3、取数组末尾至少两个条目，确保它们具有连续的frame ID。
4、计算duration平均值avgDuration = (entry1.duration + entry2.duration) / 2。
5、瞬时FPS = Math.round(1000 / avgDuration)。
6、注意该API返回条目数量有限，需定期清理并重新采集。
五、注入自定义Canvas合成帧检测逻辑
该方法适用于WebGL或复杂Canvas动画场景，通过在每一帧绘制结束时插入标记时间点，再结合定时器采样，实现对实际合成帧率的观测。
1、在Canvas渲染主循环末尾添加performance.now()打点，并存入一个固定长度为60的数组。
2、启动一个setInterval，间隔1000ms执行一次FPS计算逻辑。
3、从数组中取出最近一次写入位置向前推60个元素（若存在），计算首尾时间差。
4、若时间差大于0，则FPS = Math.round(60000 / 时间差)。
5、将结果写入页面浮动面板或console输出，确保该面板不参与Canvas重绘以免干扰测量。
6、每次采样后清空数组或滚动覆盖旧值，保持内存占用稳定。
以上就是HTML如何计算页面FPS_性能监测实现方法【技巧】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1605581.html
微信扫一扫 
支付宝扫一扫 
