google-chrome - 网络选项卡上的这些数字是什么意思?

标签 google-chrome google-chrome-devtools web-performance

在网络选项卡中,在所有 HTTP 请求的列表下,我看到了一个摘要。例如:
network summary

  • 213 个请求
  • 已传输 2.5 MB
  • 7.2 MB 资源
  • 完成时间:2.1 分钟
  • DOMContentLoaded:1.23 秒
  • 负载:3.17 秒

  • Chrome 的文档有一个 extensive article about this tab ,但它没有描述这些汇总数据。
    其中一些是不言自明的。总共发送了 213 个 HTTP 请求,从第一个请求到 document.DOMContentLoaded 用了 1.23 秒事件被触发。完成值的大值实际上是有道理的,因为此页面具有用于点击跟踪的重复“ping”事件。但是,其他值有点令人困惑。
    为什么传输和资源有两个非常不同的数字 - 即传输字节和资源字节之间有什么区别?此外,“加载”时间究竟代表什么——直到 window.load 的时间。事件或其他什么?

    最佳答案

    DevTools 文档指向 MDN's load event page来描述“负载”数字。所以是的,“加载”是从导航到 window.load 的时间。

    “传输”是指网络上的字节。 “资源”是指这些文件下载和解压缩后的权重,如 DevTools reference 所示。 .

    下载jQuery from its CDN说明了差异。 DevTools reference points out请求表中较小的数字表示压缩后的大小。

    screenshot of Chrome DevTools showing the summary bar with the same numbers as the jQuery download listed in the table

    关于google-chrome - 网络选项卡上的这些数字是什么意思?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56368614/

    相关文章:

    javascript - Chrome 性能.计时错误输出(与开发工具不匹配)

    google-chrome - list 文件在 Chrome 应用程序中可以是动态的吗?

    javascript - 如何仅在我的网页上更改数字上的文本装饰?

    javascript - 节流 Reactjs 事件系统

    javascript - 谷歌浏览器的 console.log() 打印 DOM 节点不一致

    javascript - 在 JS 中扩展 PerformanceObserver 的范围

    javascript - 自定义网络推送通知 (Google Chrome)

    javascript - 如何在上传目录时删除 Chrome 中的警告消息

    javascript - Chrome 在调试 AJAX 时仅显示调用堆栈中的库行

    google-search-console - 为什么 PageSpeed Insights 和 Search Console 的累积布局偏移不同?