Chrome 开发者工具中的空闲和其他时间。为啥浏览器长时间不活动？

Posted 2023-02-15

【中文标题】Chrome 开发者工具中的空闲和其他时间。为啥浏览器长时间不活动？

【英文标题】：Idle and Other times in Chrome Developer Tools. Why the browser is inactivity for so long?Chrome 开发者工具中的空闲和其他时间。为什么浏览器长时间不活动？

【发布时间】：2017-03-23 05:59:52

【问题描述】：

Chrome 开发者工具的“时间线摘要”选项卡中的“空闲”和“其他”时间包含哪些内容？

是什么导致了如此多的无所作为？

为什么会出现这些情况？

如何减少这些时间？有可能吗？

为什么浏览器长时间不活动（在空闲时间的情况下）？

在超过 1.8 秒开始时没有任何反应：

中间的“Idle”和“Other”大约占0.3秒：

在将近 3 秒后什么都没有发生：

在这个例子中，我们有将近五秒钟的不活动浏览器...

【问题讨论】：

Idle 显然是什么都没有发生的时间，所以我不确定你为什么要减少它。 Other 是 js 引擎事件循环开销，您可以在单击时间轴中的灰色水平块后看到。我猜你可以写更少的代码来减少它:-)

啊，启用工具栏中的所有复选框以查看网络请求。另外，进入 chrome://flags/#enable-devtools-experiments 并启用它，重新启动 Chrome，进入 devtools、设置、实验，点击 Shift 键 6 次，选择所有与 Timeline 相关的实验。

好吧，现在您可以调查似乎什么都没有发生的空闲区域。向上拖动 Main 图表以查看 Raster、GPU、Compositor 图表中的情况。

呃，网络资源正在加载中，表示服务器慢。

我推测空闲时间是等待服务器回复，操作后清除浏览器进程等。我试图弄清楚为什么会有空闲时间以及它为什么会改变。我重新编写了一个包含 47 个 html 错误、两个 404 错误的页面，并结合了一些脚本。加载时间从约 2.4 秒减少到约 1.05 秒。空闲时间从 1813ms 减少到 485ms。在错误页面上，初始请求和渲染之间大约有 750 毫秒的空闲时间。也许浏览器正在处理错误的代码（空闲？）——没有加载、渲染、脚本或绘画？其他时间大致相同。

【参考方案1】：

“空闲”状态发生在浏览器尚未完成页面在屏幕上的最终呈现但必须暂停进程同时等待恢复所需的丢失数据或资源时完成它。

我们可以处理较长的“空闲”周期，例如，当浏览器等待同步响应时，该响应在服务器端生成了很长时间。

“空闲”状态不应与“加载”状态相混淆，这是浏览器实际上传响应的时间（从第一个字节到最后一个字节），而不是从发送请求以上传响应。

“Other”状态表示除饼状图中列出的所有浏览器活动的时间，例如 DOM 树构建、CSSOM 等。

这个问题在“Render-tree Construction, Layout, and Paint”网站上有部分解释。

【参考方案2】：

使用Start profilling and reload page 按钮而不是Record 按钮将给出我们正在等待的结果，因为它会在页面完成加载后停止录制，从而减少idle。

【讨论】：

没有，一定有别的解释。

【参考方案3】：

Check out this topic

空闲就是这样，没有任何事情发生，所以据我所知没有什么可担心的。

其他是“未检测的活动”。这是目前无法分解的东西。因此，您无法从 DevTools 分析那里发生的事情。

【参考方案4】：

我在Addy Osmani's blog找到了部分答案：

在 Frame 模式下，带阴影的竖线对应于重新计算样式、合成等。每个垂直条的透明区域对应于空闲时间，至少是页面部分的空闲时间。例如，假设您的第一帧需要 15 毫秒来执行，而下一帧需要 30 毫秒。一种常见的情况是帧与刷新率同步，在这种情况下，第二帧的渲染时间略长于 15 毫秒。在这里，第 3 帧错过了“真正的”硬件帧，并在下一帧上渲染，因此，第二帧的长度有效地加倍了。

但这并没有穷尽主题。

问题中包含的图表未使用框架的示例。

我还是不知道怎么缩短时间，“Other”下面隐藏了什么。

【讨论】：

无法从这个答案中理解任何内容。特别是Here, frame 3 missed the "true" hardware frame and was rendered upon the next frame, hence, the length of the second frame was effectively doubled.什么意思？

@RehanKhan 请在addyosmani.com/blog/…博客上查看

已经做到了。以为您从中理解了一些东西（因为我没有），并且可能会用您的话解释作者Here, frame 3 missed the "true" hardware frame and was rendered upon the next frame, hence, the length of the second frame was effectively doubled.

的意思

页面加载时屏幕上会发生两件事。硬件屏幕刷新和帧渲染代码运行。通常两者都是同步安排的，不会造成延迟。请记住，硬件屏幕刷新发生在预定时间。但是想象一下，如果第一帧加载比硬件屏幕加载花费更多时间。第一帧加载将等到第二次屏幕刷新发生并开始渲染。因此第二帧加载被延迟。

@Linus 感谢您的评论！你能把它写成答案并进一步发展吗？您认为您描述的主题可能是指“空闲”或“其他”，还是两者兼而有之？这是唯一的原因吗？您认为还有其他原因吗？