为什么 FPS 在 Chrome DevTools 中没有显示任何数据？

Question

我在查看this article，发现this Codepen关于CSS动画：

html, body {
  overflow: hidden;
  background: #a02615;
  padding: 0;
  margin: 0;
}

.sun {
  position: absolute;
  top: -75px;
  left: -75px;
  animation: sun-spin 10s linear infinite;
}

@keyframes sun-spin {
	from { transform: rotate(0); }
	to   { transform: rotate(360deg); }
}

<img src="//sergeche.github.io/gpu-article-assets/images/sun-full.png" class="sun" />

我想检查这个动画的 FPS。当我打开 FPS Meter 时，我可以看到 FPS 始终在 60 左右：

但是，当我在 Chrome DevTools 中运行性能配置文件时，FPS 仍然为空：

知道为什么我在 DevTools 中没有看到 60 FPS 的绿线吗？

Answer 1

要解决此问题，您需要打开 Chrome 的 FPS 仪表（在“渲染”选项卡 - FPS 仪表下），并同时记录性能（在 Chrome 的“性能”选项卡下）。除非 FPS 仪表在录制时正在运行，否则 FPS 值将不会显示在性能记录中（话虽如此，对于这个特定的动画，即使在 FPS 仪表复选框时，我也设法让 FPS 值显示出来未选中）。

确保在记录性能时没有通过 codepen.io 运行动画。在本地运行代码对我有用（请参阅屏幕截图）。