Chrome渲染分析之Rendering工具使用(3)

在前面2篇文章中介绍了 Show paint rectangles 和 show composited layer borders 两个选项的作用。今天接着讲下一个: show FPS meter

show FPS meter

show fps meter 可以理解为显示FPS帧频/帧数。开启这个选项后,右上角会实时显示当前页面的FPS。

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

记得以前做Flash游戏的时候,FPS帧数是游戏流畅度的一个重要指标。在web端,道理也是一样。

还记得我之前的文章提到 《web移动端性能调优及16ms优化》 这里的16毫秒,实际就是 1000ms/60FPS = 16.6ms。 也就是一帧所花费的时间约是16毫秒。

科普完毕,回到正题。chrome提供的 show FPS meter 选项,在我们制作测试页面交互及动画性能时非常有用。同时它也提供了当前页面的GPU占有率给我们。