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

Question

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

Answer 1

使用分析器顶部的轴和分析器输出的摘要选项卡中的颜色图例解释此数据。 Refer to this screenshot of a profile I took of this page for added clarity.

---

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

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

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

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

---

个人资料摘要选项卡的图例中描述了条形的颜色（请参阅我的链接图像以增加清晰度）。在撰写本文时：

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

如果对您的可视化也有帮助，您可以运行此代码 sn-p 以在 * 上更轻松地查看颜色：

.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>