这是一个在我正在开发的页面上滚动时录制的示例：
你可以看到,在一些帧中有很大的延迟,但在时间轴上没有任何明显的原因(黄色“定时器发生”事件之间存在很大差距).如何解决性能问题,以提高帧速率？
解决方法
这是Chrome开发人员工具时间轴面板的“框架”视图中特别令人担忧的快照.
>灰色区域表示DevTools没有测试的活动,而Chrome团队则致力于保持尽可能小的区域
>清除区域表示显示刷新周期之间的空闲时间,这通常不是问题,特别是如果区域带来达到60fps线,因为这只是Chrome等待在监视器的vsync上传送帧
酒吧底部的黄色和绿色区域呈现淡黄色和绿色区域,表明事件处理,绘画和合成都运行得很快 – 足够快到落在水平线下,表示30fps阈值,并且可能比60fps阈值大多数时间(行未显示)
要了解更多信息,请打开开发工具选项并检查：
启用此功能后,您将在“RECORDS”栏中看到灰色区域：
每个灰色区域显示渲染器线程占用的时间段.如果你看到很多差距,那么浏览器可能是GPU绑定的.
Chrome的工程师Nat Duca在this post提供了更多信息：
GPU boundedness typically comes from two things:
- having -webkit-filter,preserves3D properties on elements. Those eat away at the gpu like… um,something hungry.
- having too many big layers.
Layers? “Show composited layer borders” to see them. The place most folks get in trouble is not layer count really,but rather the area of the layers.
Rule of thumb: most computers are designed so that they can touch every pixel on its main screen about 4 times. As a really simple example,a 2-year-old MacBook Air is provisioned for its LCD’s size. When you plug in a 30″ monitor that has more than one layer,it starts getting GPU bound.
Why does this matter? [Handwaving,] a layer touches a pixel once when we draw the screen. If a layer is the size of your window,e.g. you’ve got a width=100% height=100% div with -webkit-transform: translateZ(0),then you’re touching every pixel of the screen once. So,count up the the area of your layers and if you exceed 4 times the area of your monitor,you may not be able to go to space [because you’re GPU bound].
A good test for gpu boundedness is to shrink the window size by 1/2 in each dimension. If things stay slow,then something else is happening… if things get faster,you were probably hitting the GPU.
在我的情况(显示在最上面的图片),我仍然试图找出导致灰色条纹的原因.代码没有改变,性能过去很好.可能是因为某些原因,较新版本的Chrome(今天运行的是31.0.1650.57 m)与此代码不同.再次,灰色区域表示渲染线程忙于未测量的代码,所以很难说出发生了什么.
