官方资料: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