如何阅读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. 空闲是白色

如果对您的可视化也有帮助，可以运行以下代码段以在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>