时间戳

首页 > 解决方案 > 解释 Chrome 开发工具中的丢帧

javascript - 解释 Chrome 开发工具中的丢帧

问题描述

我正在寻找有关在显示丢帧时如何解释 Chrome 开发工具的信息。官方文档似乎没有涵盖这个或关于请求动画帧的 Udacity 课程。

我有一个 webGL 项目（使用 Three.js），当我制作动画时，我在 chrome 开发工具中看到以下内容 - 我正在使用 requestAnimationFrame。

需要明确的是，我不是在问如何修复我的代码，或者我的代码有什么问题。我正在寻求帮助来理解这告诉我什么，代码是无关紧要的。

如果有人可以建议...

在此处输入图像描述

  1. 从上面的屏幕截图中，您可以看到它需要 15.7 毫秒，但警告有丢帧。如果我点击任务似乎需要 12 毫秒，那么额外的 3.7 毫秒来自哪里？由于我的功能都包含在“任务”部分中，我该如何找到？

  2. 在 ref 15.7ms 之前看到的绿色 1.0ms 是一帧吗？- 这是否意味着我正在触发 requestAnimationFrame 但什么也不做？由于开发工具中没有显示任何内容，我怎样才能找出触发它的原因？

编辑。这是我能得到的一个更极端的例子，你可以看到它是同样的事情，我的任务实际上花了 9 毫秒，但它说帧是 82 毫秒！

在此处输入图像描述

标签： javascriptgoogle-chrome-devtools

解决方案

我不是谷歌的，甚至不是 DevTools 方面的专家，只是在浏览了 Chrome DevTools 中的几行代码后路过。

丢帧有几个原因，您可以在FrameDropReason进行检查。

但是要了解丢帧的原因是什么，除了阅读分析 JSON 之外，我没有找到更好的方法，您可能会发现如下内容：

{"args":{"data":{"compositeFailed":8192,"unsupportedProperties":["background-color"]}},"cat":"blink.animations,devtools.timeline,benchmark,rail","id2":{"local":"0x3b08a0fb80"},"name":"Animation","ph":"n","pid":23024,"scope":"blink.animations,devtools.timeline,benchmark,rail","tid":259,"ts":71014192568},

基本上说由于不支持的 CSS 问题，合成器丢弃了帧。有关合成器失败原因的更多详细信息，请点击此处。

研究这个跟踪添加的问题也很好Dropped Frame。

同样，我不完全确定，只是一些提示供您研究。

推荐阅读