Analyze runtime performance

运行时性能是您的页面在运行时的体现，而不是加载。就 RAIL 模型而言，本文介绍的办法对于剖析页面的响应、动画和闲暇阶段十分有用。

在隐身模式下关上谷歌浏览器。隐身模式可确保 Chrome 以洁净的状态运行。例如，如果您装置了很多扩大，这些扩大可能会在您的性能测量中产生烦扰。

在您的隐身窗口中加载以下页面。这是您要剖析的演示。该页面显示了一堆高低挪动的蓝色小方块。

https://googlechrome.github.i…

Simulate a mobile CPU

挪动设施的 CPU 能力远低于台式机和笔记本电脑。每当您剖析页面时，请应用 CPU 节流来模仿您的页面在挪动设施上的体现。

下列选项，CPU 4x slowdown, 模拟出运算速度只有以后 1/4 的 CPU：

Set up the demo

很难为所有读者创立一个始终如一的运行时性能演示。因而 Google 筹备了一个容许自定义屏幕上呈现元素数量的 web 利用，以确保您的体验与您在本教程中看到的屏幕截图和形容绝对统一，而不论您的计算机的硬件配置如何。

(1) 持续单击 Add 10，直到蓝色方块的挪动速度显著比以前慢。在高端机器上，可能须要大概 20 次点击。

(2) 单击优化。蓝色方块应该挪动得更快更安稳。

如果您没有看到优化和未优化版本之间的显著差别，请尝试屡次单击“减去 10”并重试。如果增加太多蓝色方块，只会使 CPU 使用率最大化，并且不会看到两个版本的后果有很大差别。

Record runtime performance

当您运行页面的优化版本时，蓝色方块挪动得更快。这是为什么？两个版本都应该在雷同的工夫内将每个方格挪动雷同的空间。在性能面板中进行录制，理解如何检测未优化版本中的性能瓶颈。

点击 Performance 面板的 Record 图标，开始录制：

等几秒钟后，点击 Stop:

上面介绍如何解读 Performances 面板生成的统计数据。

Analyze frames per second

掂量任何动画性能的次要指标是每秒帧数 (FPS)。当动画以 60 FPS 运行时，意味着较好的用户体验。

查看 FPS 图表。每当您看到 FPS 上方的红色条时，就意味着帧率降落得太低，可能会侵害用户体验。一般来说，绿色条越高，FPS 越高。

如下图所示，我开启了 recording，而后反复点击 Add 10，在此过程中，能看到代表 FPS 低于 60 的红线逐步升高，而后在 CPU 栏，代表 Rendering 的紫色图例越来越多。

将鼠标悬停在 FPS、CPU 或 NET 图表上。DevTools 显示了过后页面的屏幕截图。左右挪动鼠标可重播录音。这称为擦洗 (scrubbing)，它对于手动剖析动画的过程很有用。

看这个 frames 栏：

在框架局部，将鼠标悬停在其中一个绿色方块上。DevTools 会向您显示该特定帧的 FPS。每帧可能远低于 60 FPS 的指标。

Bonus: Open the FPS meter

咱们还能够应用 FPS meter 观测一个网页实时的 FPS 数据。

快捷键：Control+Shift+P 抉择 show rendering：

在渲染选项卡中，启用 FPS Meter。即下图这个 checkbox：

视口的右上角会呈现一个新的叠加层。能显示实时的 FPS 数据：

咱们在 summary 标签页里看到，该 web 利用的瓶颈在 rendering：

开展 main 局部。DevTools 会向您显示主线程上随工夫变动的流动火焰图。x 轴示意随工夫的记录。每个条形代表一个事件。

更宽的条形意味着该事件破费的工夫更长。y 轴代表调用堆栈。当您看到事件重叠在一起时，这意味着较高的事件导致较低的事件。

recording 中有很多数据。通过单击、按住并将鼠标拖动到“概览”（包含 FPS、CPU 和 NET 图表的局部）上，放大单个动画帧触发事件。次要局部和摘要选项卡仅显示所选 recording 局部的信息。

请留神 Animation Frame Fired 事件右上角的红色三角形。每当您看到红色三角形时，即示意可能存在与此事件相干的问题的正告。

每当执行 requestAnimationFrame() 回调时，就会产生 Animation Frame Fired 事件。

单击动画帧触发事件。“摘要”选项卡当初显示无关该事件的信息。留神揭示链接。单击它会导致 DevTools 突出显示启动 Animation Frame Fired 事件的事件。另请留神 app.js:94 链接。单击它会将您跳转到源代码中的相干行。

app.update = function (timestamp) {for (var i = 0; i < app.count; i++) {var m = movers[i];
      if (!app.optimize) {var pos = m.classList.contains('down') ?
            m.offsetTop + distance : m.offsetTop - distance;
        if (pos < 0) pos = 0;
        if (pos > maxHeight) pos = maxHeight;
        m.style.top = pos + 'px';
        if (m.offsetTop === 0) {m.classList.remove('up');
          m.classList.add('down');
        }
        if (m.offsetTop === maxHeight) {m.classList.remove('down');
          m.classList.add('up');
        }
      } else {var pos = parseInt(m.style.top.slice(0, m.style.top.indexOf('px')));
        m.classList.contains('down') ? pos += distance : pos -= distance;
        if (pos < 0) pos = 0;
        if (pos > maxHeight) pos = maxHeight;
        m.style.top = pos + 'px';
        if (pos === 0) {m.classList.remove('up');
          m.classList.add('down');
        }
        if (pos === maxHeight) {m.classList.remove('down');
          m.classList.add('up');
        }
      }
    }
    frame = window.requestAnimationFrame(app.update);
  }

应用键盘高低箭头切换事件的显示：

在 app.update 事件下，有一堆紫色事件。如果它们更宽，看起来如同每个下面都有一个红色三角形。当初单击紫色布局事件之一。DevTools 在摘要选项卡中提供了无关事件的更多信息。事实上，有一个对于强制回流的正告（布局的另一种说法）。

先选中 app.update, 而后按键盘下箭头，再左右挪动，找到这些 forced reflow 的代码，同样能够点击超链接看到引起回流的精确代码行数：

比方第 71 行的 m.offsetTop 引起回流：

这段代码的问题在于，在每个动画帧中，它会更改每个方块的款式，而后查问每个方块在页面上的地位。因为款式扭转了，浏览器不晓得每个方块的地位是否扭转，所以它必须从新布局方块以计算它的地位。请参阅防止强制同步布局以理解更多信息。

更多 Jerry 的原创文章，尽在：” 汪子熙 ”: