网页的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:

这个是火狐浏览器的一个全局属性，每次去控制台输入这个名字，都会有一个值输出。它代表的是当前文档 paint 到屏幕上的数量

那如果我写一个脚本，每秒钟去取的这个值，然后就可以去计算fps了：

Time Count 1 100 2 143 3 324

---

requestAnimationFrame

思路2：

这里面用到了一个方法：requestAnimationFrame但是我之前没有用过这个东西，所以还需要后面研究，这边我找了个动画代码，然后把loop代码放进去，试着比较了下log打印的fps和监控面板的曲线图，发现还是有点出入的。

var lastTime = performance.now();var frame = 0;var lastFameTime = performance.now();var loop = function(time) {    var now =  performance.now();    var fs = (now - lastFameTime); //兩次循環的間隔毫秒    lastFameTime = now;    var fps = Math.round(1*1000/fs);//临时的间隔    frame++;    if (now > 1000 + lastTime) {  //如果时间大于1s了。        var fps = Math.round( ( frame * 1000 ) / ( now - lastTime ) ); //计算fps        frame = 0;            lastTime = now;        };    console.log(fps);}var ele = document.getElementById("test");var progress = 0;function step(timestamp) {    loop(timestamp);    progress += 1;    ele.style.width = progress + "%";    ele.innerHTML=progress + "%";    if (progress < 100) {        requestAnimationFrame(step);    }}document.getElementById("run").addEventListener("click", function() {    ele.style.width = "1px";    progress = 0;    requestAnimationFrame(step);}, false);

不知道是不是loop的用法不对，总感觉哪里对不上。后面再研究研究这个requestAnimationFrame的用法吧

---

参考文章：

• [1]: http://taobaofed.org/blog/2016/01/13/measuring-fps/#mozPaintCount
• [2]: http://www.ghugo.com/chrome-rendering-tools-3/