如何阅读Chrome DevTools中的“网络”标签-加载时间

Question

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

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

因此，从我看来，这是30个请求，总大小为34.7 KB，但是我不确定接下来发生的事情。所以我想要剩下的统计数据。

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

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

3）DOMContentLoaded：235毫秒-这是浏览器解析所接收的DOM所花费的时间吗？

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

Answer 1

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

    

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

• Load是load事件的时间戳：

    

  在资源及其相关资源完成加载后触发