Web检查与“框架”剖析：没事的时候出现在时间轴发现的性能问题的原因(Web inspector p

我刚看了谷歌I / O会议JANK克星：构建高性能的Web应用程序，其中扬声器解释如何使用Chrome网络检查时间轴上的新“框架”的看法。

下面是我我正在开发一个网页上滚动时有一个例子记录：

正如你所看到的，也有一些帧，但没有时间表中的任意明显造成巨大的延迟（也有在黄色的“计时器所触发”事件之间较大的差距）。我怎样才能解决，以提高帧速率一致的性能问题？

Answer 1:

你的榜样其实看起来并不太坏。您的代码运行速度快，浏览器只会在60fps的渲染，所以花一点时间（最多16毫秒）未来渲染循环，等待周围。

下面是来自Chrome开发工具时间轴面板的框架视图一个尤其令人担忧快照。

根据该文件：

灰色区域表示没有被DevTools仪表活性，Chrome团队工作，以保持这一领域尽可能小
清除区域表示显示更新周期，这通常不是一个问题，特别是如果该区域带来达到到60fps的线之间的空闲时间，因为这仅仅是铬等待到显示器的垂直同步传送的帧

在酒吧的底部微乎其微黄色和绿色区域表示事件处理，涂装，合成全跑很快 - 足够快的水平线下回落指示30fps的门槛，并可能快于60fps的门槛最的时间（未示出一行。）

要了解更多信息，请打开开发者工具选项，并检查：

启用此功能后，你会看到在“记录”栏灰色区域：

每个灰色区域表示在此期间，渲染器线程被占据的时段。如果你看到不少差距，然后在浏览器很可能GPU结合。

纳特Duca酒店，在Chrome的工程师，提供了更多的信息，这篇文章：

GPU界通常来自两个方面：
具有-webkit滤波器，上元件preserves3D性质。那些在GPU一样......嗯，饿了的东西吃了。
有太多的大层。
图层？ “展会复合层边框”看到他们。这个地方，大多数人在遇到麻烦是不是层数真的，而是层的面积。
经验法则：大多数电脑的设计，使他们可以约4倍摸摸它的主屏幕上的每个像素。作为一个非常简单的例子，一个2岁的MacBook Air被规定为它的LCD的大小。当您在一个30" 显示器具有超过一层堵塞，它开始变得GPU的约束。
为什么会发生这种事？ [Handwaving，]的层接触的像素一旦当我们绘制屏幕。如果一个层是你的窗口的大小，例如你有一个宽度= 100％HEIGHT = 100％，-webkit-变换DIV：translateZ（0），那么你触摸屏幕的每个像素一次。所以，算你的层的面积，如果超过4倍的显示器领域，你可能不能够去太空[因为你是GPU的约束。
一个好的测试针对GPU有界是由1/2在每个维度缩小窗口的大小。如果事情留慢，然后还有其他事情正在发生的事情......如果事情变得更快，你很可能击中GPU。

在我的例子（显示在最上面的图片），我仍然试图找出是什么导致的灰色条。代码并没有改变，与使用性能是巨大的。这可能是Chrome浏览器的新版本（今天我跑31.0.1650.57米）不使用此代码出于某种原因进行为好。同样，灰色区域表示渲染线程忙于桩的代码，因此它很难说了事情的原委。

Answer 2:

我建议你使用http://pagespeed.googlelabs.com

它基本上会告诉你发生了什么事时，正在加载页面的完整细节，让你知道在哪里工作就......（我也觉得可能会错过在某些情况下某些信息）

此外，你应该做的页面的内存分析，看看某些对象多久才能得到加载到内存中。