为什么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仪表时，我可以看到FPS始终在60左右：

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

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

Answer 1

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

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