在前面2篇文章中介绍了Show paint rectanglesshow 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占有率给我们。

未标题-1

One thought on “Chrome渲染分析之Rendering工具使用(3)

Leave a reply

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> 

required