css - 为什么 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 运行动画。在本地运行代码对我有用(请参阅屏幕截图)。