Chrome Developer Tools: Network Panel补充说明

官方资料:Chrome Developer Tools: Network Panel

补充说明

1, 红粗线1中,Time(80ms)  = 50ms + 30ms

  前面的50ms包括Connect + Send + Wait

      后面的30ms为Receive时间

  Connect: 是创建TCP连接到服务器。

  Send:  是发送HTTP请求到服务器的时间,这个时间取决与发送请求的数据量的大小

        例如,长的发送时间是由于用 PSOT方式上传文件造成的。

  Wait:       是花费在等待服务器响应消息的空闲时间,这个值包括网络延迟和服务器处理请求的时间 

  Receive:  是花费在从服务器读取响应消息的时间。

                      这个值可以受到请求消息内容的大小,网络带宽和是否使用了HTTP压缩。

  参考资料:http://blog.sina.com.cn/s/blog_667553370100qb67.html

2, 红粗线2中,

  "640ms":  表示整个页面加载时间为640ms

     "DOMContentLoaded:366ms": 发生页面 DOMContentLoaded 事件的启动时间点,对应上图蓝色竖线。

  "onload:395ms":  表示页面 load 事件的启动时间点,对应上图红色竖线。

  参考资料:window.onload 和 DOMContentLoaded

 

原文地址:https://www.cnblogs.com/season2009/p/2738496.html