performance - 如何阅读 Chrome DevTools 中的网络选项卡 - 加载时间

Question

自从我最近一直在使用 UI 并想了解更多信息以来，我一直对此感到好奇。

我一直在阅读 chrome 网络参考指南，但我不确定我是否理解正确。我主要对底行或摘要窗格感到好奇。

因此，据我所知，这里有 30 个请求，总大小为 34.7 KB，但我不确定接下来的内容。所以我想要剩下的统计数据是什么。

1) 758 KB 资源 - 这是加载和发送的总资源吗？

2) 完成：448 毫秒 - 这是整个网站完成加载所需的时间吗？

3) DOMContentLoaded: 235 ms - 这是浏览器解析接收到的 DOM 所花费的时间吗？

4) 加载：421 毫秒 - 这是我的浏览器完成加载页面所有必要资源（如字体、图片等）所花费的时间吗？

标签： performancegoogle-chromenetworkinggoogle-chrome-devtools

Answer 1

• transferred表示来自网络，其余（总共 758 kB）来自缓存
• finish是最后一个资源的时间戳，因此每当发出新请求时它都会更改
• DOMContentLoaded是DOMContentLoaded事件的时间戳：

  当初始 HTML 文档完全加载和解析时触发，无需等待样式表、图像和子框架完成加载

• Load是加载事件的时间戳：

  当资源及其依赖资源完成加载时触发