在Chrome开发工具中解释掉帧
我正在寻找有关如何在 Chrome Dev Tools 显示丢帧时解释它的信息。官方文档似乎没有涵盖这个或关于请求动画帧的 Udacity 课程。
我有一个 webGL 项目（使用 Three.js），我在制作动画时在 chrome 开发工具中看到以下内容 - 我正在使用 requestAnimationFrame。
明确地说，我不是在问如何修复我的代码，或者我的代码有什么问题。我正在寻求帮助理解这告诉我什么，代码无关紧要。
如果有人可以建议...
-
从上面的屏幕截图中您可以看到它需要 15.7 毫秒，但警告有丢帧。如果我点击任务似乎需要 12 毫秒，那么额外的 3.7 毫秒来自哪里？我怎么知道，因为我的功能都包含在“任务”部分？
-
在 ref 15.7ms 之前看到的绿色 1.0ms 是一帧吗？- 这是否意味着我正在触发 requestAnimationFrame 但什么都不做？由于开发工具中未显示任何内容，我如何找出触发它的原因？
编辑。这是我可以得到的一个更极端的例子，正如你可以看到的一样，我的任务实际上花了 9 毫秒，但它说帧是 82 毫秒！