【问题标题】:Chrome Developer Tools: How to Read the Network Panel?Chrome 开发者工具:如何阅读网络面板?
【发布时间】:2019-03-15 02:18:50
【问题描述】:

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

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

我的问题是这样的:

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

【问题讨论】:

    标签: performance google-chrome network-protocols


    【解决方案1】:

    回答第二部分:

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

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

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

    【讨论】:

    • 谢谢,这就是我要找的 :-)
    【解决方案2】:

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

    DNS 查找

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

    正在连接

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

    发送

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

    等待

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

    接收

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

    【讨论】:

    • 那么基本上,第一张图片中的红线表示文件已从网络加载,蓝线表示此内容已被浏览器解析?
    • 红线是311ms吗?如果是这样,那么就是从服务器接收到内容的时候。然后我猜 Chrome 是否会将页面加载到浏览器中,然后触发 DOM 事件。老实说,我不确定,但浏览器必须在 DOM 发生任何事情之前加载页面。
    【解决方案3】:

    【讨论】:

    猜你喜欢
    • 2012-06-11
    • 2013-01-15
    • 2017-09-22
    • 1970-01-01
    • 2013-09-09
    • 1970-01-01
    • 2016-08-16
    • 1970-01-01
    • 2022-01-22
    相关资源
    最近更新 更多