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

Question

＆＃34; Idle＆＃34;中包含的内容和＆＃34;其他＆＃34;时间进入Chrome开发者工具的Sumary of Timeline选项卡？

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

为什么会出现这种情况？

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

为什么浏览器长时间不活动（在空闲时间内）？

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

在中间＆＃34;空闲＆＃34;和＃34;其他＆＃34;占用约0.3秒：

在差不多3秒结束时没有任何事情发生：

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

Answer 1

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

  

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

但这并没有用尽这个话题。

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

我仍然不知道如何缩短时间，以及隐藏在“其他”下的内容。

Answer 2

Check out this topic

  

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

     

其他是“未装备的活动”。哪些东西目前无法分解。所以，你无法从DevTools分析那里发生的事情。

Answer 3

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

Answer 4

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

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

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

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

此问题在“Render-tree Construction, Layout, and Paint”网站上有部分说明。