如何阅读 Chrome 开发工具性能分析 --> 网络选项卡？

Question

在分析网站后的网络下拉列表中，数据在数据前后显示细白线。这些细白线表示什么？

Answer 1

使用探查器顶部的轴和探查器输出的摘要选项卡中的颜色图例来解释此数据。为了更加清晰，请参阅我在此页面上截取的个人资料屏幕截图。

通过查看配置文件顶部附近（网络配置文件下拉列表的正上方），您将看到一个与页面请求开始以来的时间相对应的轴。一切都以毫秒为单位（在分析器中缩写为“ms”）。

请求上细线的左边缘表示下载栏正文中指定内容的请求的开始时间。（请参阅图像中的 .mp4 条，以清楚地描述所引用细线的左边缘）

同样，请求上细线的右边缘表示所请求资源的结束时间。该时间包括任何下载和加载/执行时间。

条形的位置告诉您每个资源相对于配置文件中其他资源的加载时间以及开始时间。

条形的颜色在配置文件摘要选项卡的图例中进行了描述（为了更加清晰，请参阅我的链接图像）。在撰写本文时：

1. 加载中是蓝色的
2. 脚本是橙色的
3. 渲染出来是紫色的
4. 画是绿色的
5. 系统是灰色的
6. 空闲时为白色

如果对您可视化也有帮助，您可以运行以下代码片段，以便在 StackOverflow 上更轻松地查看颜色：

.input-color {
  position: relative;
}

.input-color input {
  padding-left: 20px;
  background-color: #fff;
}

.input-color .color-box {
  width: 10px;
  height: 10px;
  display: inline-block;
  background-color: #8e8e8e;
  position: absolute;
  left: 5px;
  top: 5px;
}

<div class="input-color">
  <input type="text" value="Loading (Blue)" readonly/>
  <div class="color-box" style="background-color: #90b7e9;"></div>
</div>
<div class="input-color">
  <input type="text" value="Scripting (Orange)" readonly/>
  <div class="color-box" style="background-color: #f3d17c;"></div>
</div>
<div class="input-color">
  <input type="text" value="Rendering (Purple)" readonly/>
  <div class="color-box" style="background-color: #af99eb;"></div>
</div>
<div class="input-color">
  <input type="text" value="Painting (Green)" readonly/>
  <div class="color-box" style="background-color: #90c185;"></div>
</div>
<div class="input-color">
  <input type="text" value="System (Grey)" readonly/>
  <div class="color-box" style="background-color: #dedede;"></div>
</div>
<div class="input-color">
  <input type="text" value="Idle (White)" readonly/>
  <div class="color-box" style="background-color: #fafafa;"></div>
</div>