网页的FPS测试

本文介绍了如何利用Chrome的开发者工具进行网页FPS性能测试,包括如何开启FPS计数器和理解FPS概念。同时,讨论了mozPaintCount和requestAnimationFrame两种测试方案,适合批量测试页面的流畅性。

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

网页的FPS测试

最近看了一篇文章,讲的是fps性能测试的一些知识,觉得非常厉害,这里做一个记录,一方面加深记忆,一方面也给那些没看到的人共享一下。

文章开始说,当我们想测量下页面滚动的顺畅性时,可以打开chrome自带的工具:show fps meter 然后滑动页面,就可以根据FPS的监控面板上的曲线,来判断顺畅性了 。╮(╯▽╰)╭,这里我表示一点都不知道。查了一下资料后才找到这个监控面板的打开方式。

科普一下步骤:
1. F12 调出开发者工具
2. 按ESC打开控制台
3. 点击Rendering(如果没有Rendering的话,在更多按钮里面点一下就可以了)
4. 勾选 ‘show fps meter’

控制台

监控面板

这里还要记录下fps的概念:

FPS全称叫 Frames Per Second (每秒帧数)。帧数越高,动画显示的越流畅。一般的液晶显示器的刷新频率也就是 60HZ。也就是说,要想页面上的交互效果及动画流畅。那么FPS稳定在60左右,是最佳的体验。。据悉 ios上的交互效果都是60FPS呢。


现在有个需求,如果有很多页面需要去测,我不能每个都打开监控面板去看,这就需要测试工具来测试并分析,然后单独去看那些有问题的页面。于是,正片来了:

mozPaintCount

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值