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

Question

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

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

我的问题是:

1. DNS Lookup,Connecting,Sending,Waiting and Receving是什么意思？每个阶段服务器,网络和浏览器之间发生了什么？
2. 在第一张图像上,红线显示"Load event fired",蓝色显示"DOMContent event fired".这是什么意思,为什么在加载所有内容后触发DOMContent事件？

Answer 1

回答第二部分:

蓝线(DOM内容加载事件):
当浏览器完成解析主文档时发生.

红线(加载事件):
当浏览器完成检索主文档所需的所有资源时发生.

在红线之后:在这里,您将看到主文档和其他资源所需的异步和缓存资源的加载.

Answer 2

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

DNS查找

当您连接到网站时,它必须从DNS查找IP.例如,您的计算机将联系DNS询问是否知道"google.com"的位置.如果有,它会给你一个IP.如果没有,它会给你另一个DNS的IP,或者它将联系该DNS本身(我不确定哪个实现适用于哪里),直到最终你最终得到你正在寻找的主机的IP对于.

连

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

发出

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

等候

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

接收

服务器处理完您的请求后,它会将数据发回给您.