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

Question

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

Answer 1

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

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

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

同样，您请求上细线的右边缘代表请求资源的结束时间。此时间包括任何下载和 loading/execution 时间。

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

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

加载中是蓝色的
脚本为橙色
呈现紫色
画是绿色的
系统为灰色
空闲是白色的

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

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

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

How to Read Chrome Dev Tools Performance Profiling --> Network Tab?

performance

networking

google-chrome-devtools