22

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

在此处输入图像描述

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

在此处输入图像描述

我的问题是这样的：

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

3 回答 3

23

回答第二部分：

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

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

红线之后：这里你会看到加载了主文档和其他资源所需的异步和缓存资源。

于 2015-05-11T06:10:56.517 回答
7

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

DNS 查询

当您连接到网站时，它必须从 DNS 中查找 IP。例如，您的计算机将联系 DNS，询问它是否知道“google.com”在哪里。如果是这样，它会给你一个IP。如果没有，它会给你另一个 DNS 的 IP，或者它会联系那个 DNS 本身（我不确定哪个实现适用于哪里），直到最终你得到你正在寻找的主机的 IP为了。

连接

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

发送

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

等待

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

接收

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

于 2012-08-23T18:01:57.243 回答
3

这是谷歌的描述： https ://developers.google.com/web/tools/chrome-devtools/network/reference

于 2014-05-06T14:42:05.040 回答