Chrome 开发工具时间轴帧中的额外渲染时间答案

【问题标题】：Extra render time in Chrome Dev Tools Timeline FramesChrome 开发工具时间轴帧中的额外渲染时间
【发布时间】：2013-08-17 21:49:18
【问题描述】：

有很多视频和教程旨在减少使用开发工具的帧的合成、布局和绘制时间，但我不清楚一旦这些时间远低于分配的时间该怎么办，但帧仍然需要很长时间才能渲染。

关于确定帧中究竟发生了什么导致其渲染如此缓慢的任何提示？

【问题讨论】：

我应该对此进行更多调查。事实证明，帧顶部的空头部空间实际上是渲染下一帧之前的空闲时间。它仍然很糟糕，因为这通常意味着我有一个框架，其中多个重新计算样式正在发生，从而迫使框架需要更长的时间来渲染。

标签： performance google-chrome-devtools

【解决方案1】：

Paul Irish 和 Paul Lewis 简要地谈到了这个话题here。根据该视频，白条表示浏览器正在等待 CPU 或 GPU，开发人员无法解决此问题（假设他正在使用没有 canvas/webGL 的“标准”网站）。然而，IMO 两个保罗在谈论这个时听起来都不是很有说服力。我想，这很难简单解释（也许我从视频开始就数过的 8 口啤酒是罪魁祸首:)）。

【讨论】：

这有点令人沮丧。最近网络上有大量关于“jank-busting”的说法，几乎所有的讨论都集中在通过开发工具时间线减少脚本、渲染和绘制时间。我付出了很多努力使这些时间远低于 60fps 阈值，而且许多帧似乎仍然持续 30ms 或以上。
顺便说一句，康拉德在视频中提到他们讨论透明帧的地方是 36:20，特别是适用于我的问题的部分（透明帧甚至超过了 30fps 阈值）现在是 37:25。
对此的解决方案是：cpu 可能正在做额外的工作，阻止它及时渲染帧，为了排除这种情况，您应该关闭所有其他应用程序和网页并运行该页面-in-question 在隐身标签中，以确保您不会受到其他页面、扩展程序等的干扰。