【发布时间】：2016-01-11 22:14:15
【问题描述】：
在 Chrome 47 中，我在时间轴概览和详细视图中看到红色标记（箭头）：
它们是什么意思？我怀疑它们表明时机不好。这是真的？如何获取详细信息？
我找不到详细信息in the official documentation (01-2016)。
旧版本没有显示这些标记。
【问题讨论】：
标签： google-chrome google-chrome-devtools timeline
【发布时间】：2016-01-11 22:14:15
【问题描述】：
是的。红色标记表示性能不佳或有关渲染的警告。明亮的红色条勾勒出框架，红色条是显示框架结束的标记。
这可能包括长时间运行的帧或导致性能下降的渲染/布局/绘画问题。
来自Google Chrome Dev Tools documentation（02-2017）：
- FPS 图上方的红色块表示长帧，可能是jank 的候选对象。
当您使用鼠标滚轮放大帧时，您可以详细检查每个帧。最底部还有一个摘要视图（您可能需要将其向上拖动才能打开它），它可能会为您提供问题的详细信息。
在这种情况下，帧耗时过长（比理想的 16 毫秒或 60 fps 慢）：
在这种情况下，代码会导致 Chrome 重新计算布局（成本很高）。
您可以通过单击左侧的灰色数组来打开该项目以导航到根本原因。注意 Javascript 文件和行。单击它以查看导致问题的语句（在本例中为 Layout）。
【讨论】：