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