关于chrome:Chrome-开发者工具-performance-标签页的用法

Analyze runtime performance

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

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

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

https://googlechrome.github.i…

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

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

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

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

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

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

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

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

等几秒钟后，点击 Stop:

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

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

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

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

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

看这个 frames 栏：

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

咱们还能够应用 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 的原创文章，尽在：” 汪子熙 ”:

关于chrome:Chrome-开发者工具-performance-标签页的用法

Simulate a mobile CPU

Set up the demo

Record runtime performance

Analyze frames per second

Bonus: Open the FPS meter