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

Question

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

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

为什么会出现这些情况？

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

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

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

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

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

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

Answer 1

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

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

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

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

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

Answer 2

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

Answer 3

Check out this topic

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

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

Answer 4

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

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

但这并没有穷尽主题。

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

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