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

Posted 2023-03-06

【中文标题】在 Chrome 开发工具时间轴中：红色标记是啥意思？

【英文标题】：In Chrome Dev Tools Timeline: what do the red marks mean?在 Chrome 开发工具时间轴中：红色标记是什么意思？

【发布时间】：2016-01-11 22:14:15

【问题描述】：

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

它们是什么意思？我怀疑它们表明时机不好。这是真的？如何获取详细信息？

我找不到详细信息in the official documentation (01-2016)。

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

【参考方案1】：

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

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

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

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

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

在这种情况下，帧耗时过长（比理想的 16 毫秒或 60 fps 慢）：

---

在这种情况下，代码会导致 Chrome 重新计算布局（成本很高）。

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

---