在Chrome开发工具时间轴中：红色标记是什么意思？

Question

在Chrome 47中，我在时间轴概述和详细信息视图中看到了红色标记（箭头）：

他们是什么意思？我怀疑他们表明时间不好。这是真的？我怎样才能获得详细信息？

我无法找到详细信息in the official documentation（01-2016）。

旧版本没有显示这些标记。

Answer 1

是。红色标记表示有关渲染的性能不佳或警告。明亮的红色条形勾勒出一个框架，红色条形是显示框架结束的标记。

这可能包括长时间运行的帧或渲染/布局/绘画问题导致性能降低。

来自Google Chrome Dev Tools documentation（02-2017）：

  

  
1. FPS图表上方的红色区块表示长帧，可能是jank的候选对象。
  

使用鼠标滚轮放大框架时，可以详细检查每个框架。底部还有一个摘要视图（您可能需要将其拖动以打开它），它可能会为您提供问题的详细信息。

在这种情况下，帧花费的时间太长（比理想的16ms或60 fps慢）：

在这种情况下，代码导致Chrome重新计算布局（这是成本密集型的​​）。

您可以通过单击左侧的灰色阵列打开该项目以导航到根本原因。注意Javscript文件和行。单击它以查看导致问题的语句（在本例中为布局）。