Chrome开发者工具：如何阅读网络面板？

Question

当我在网站上运行性能测试时，我正试图理解Chrome开发者工具。如果您在工具上选择网络，它将如下所示：

然后，如果我选择性能文件，我将获得此信息：

我的问题是：

1. DNS查询，连接，发送，等待和接收是什么意思？每个阶段服务器，网络和浏览器之间发生了什么？
2. 在第一张图片上，红线显示“Load event fired”，蓝色显示“DOMContent event fired”。这是什么意思，为什么在加载所有内容后触发DOMContent事件？

Answer 1

回答第二部分：

蓝线（DOM内容加载事件）：
当浏览器完成解析主文档时会发生这种情况。

红线（加载事件）：
当浏览器完成检索主文档所需的所有资源时会发生这种情况。

红线后：在这里，您将看到主文档和其他资源所需的异步和缓存资源的加载。

Answer 2

我不确定这是否适合SO，因为这是一个网络问题而不是编程问题，但我会回答我能做的部分......

DNS查询

当您连接到网站时，它必须从DNS查找IP。例如，您的计算机将联系DNS询问是否知道在哪里＆＃34; google.com＆＃34;是。如果是，它会给你一个IP。如果它没有，它会向你提供另一个DNS的IP，或者它将联系该DNS本身（我不确定哪个实施适用于哪里），直到最终你最终获得IP你正在寻找的主持人。

<强>连接

与该IP连接所需的时间。我不确定这里的细节。

<强>发送

连接后，您将请求发送到服务器。它可以是查看页面或提交数据或任何内容的请求。

<强>等待

发送请求后，您等待服务器响应它。它可能很忙或可能需要一段时间来处理你要求的任何内容。

<强>接收

服务器处理完您的请求后，会将数据发回给您。

Answer 3

以下是Google的说明： https://developers.google.com/web/tools/chrome-devtools/network/reference