如何查看每个动画的cpu和gpu使用情况？

Question

情况：
我有一个包含多个jQuery，Javascript和CSS动画的网站。这些动画有时使我的网站变得缓慢而且口吃。

问题：
如何在我的网站中查看每个特定动画的cpu和gpu使用情况？我知道如何看到网站的整个用法，而不是单一的动画。

我尝试了什么？

• Google Dev Tools
• Firefox开发工具
• Console.profile / Console.profileend

Answer 1

Chrome Dev中有多种工具可以帮助您。 分析动画时，您应该查看特定帧或帧范围的信息。

我建议从这份文件开始：

https://developer.chrome.com/devtools/docs/timeline

考虑评估：

• 帧模式，显示页面的渲染性能。
• 分析时间线录音

在Firefox中，您可以使用帧速率值作为瓶颈的指标，特别是对于动画相关问题，您可以在此处详细了解这些工具：

https://developer.mozilla.org/en-US/docs/Tools/Performance/Frame_rate

您还可以查看在Firefox中的内置配置文件中合成每个帧的时间花了多少GPU时间，可以在此处找到更多信息：

https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Profiling_with_the_Built-in_Profiler