本文共 2553 字,大约阅读时间需要 8 分钟。
找了个简单的网页来录制network:
Initator: 初始化该请求的对象或进程,可以是:
- parser: html解析器
- Redirect: 一个Http重定向初始化了该请求
- Script: 以script标签引用的js
- Other: 其他情况如用户点击了一个链接或在地址栏输入了一个地址
Size: 资源的大小
上面的图是谷歌官网加载的部分截图,可以看到谷歌已经在使用http/2了,其实当时没看到这个protocol字段的时候,一直纳闷为什么keep-alive都是空的情况下,请求是如何保持TCP复用的。所以答案就在此了吧。参考h2-14。 看下百度的加载过程: 这也是其中一部分,可以看到此处使用的是http/1.1,Connection为keep-alive,其中很多Connection Id是一致的。
紫色的线表示DomContentLoaded事件,即该时间点页面中的DOM建立完成,发生了DomContentLoaded事件 红色的线表示load事件,即该时间点页面加载完了所有的资源,发生了load事件
这个特殊的请求,没有对应的Remote Address、cookies、Connection Id等,是不是不需要TCP连接呢?
单独把这个URI拿出来写入地址栏做请求: 结论如下:
那么既然如此: 其实我们大致也能想到,它不依赖于相应主体(因为它没有嘛)。那么它的数据包含在哪里呢?你猜对了,全部包含在这个Request URL中。这种方式比较节省资源,因为它无需进行连接阶段。具体可以参考MDN中关于Data URL的介绍
除此之外,你可以参照chrome官方开发工具文档中的介绍:https://developer.chrome.com/devtools/docs/network#resource-network-timing 欢迎您的批注,如有错误,望不吝指正~
from: http://sentsin.com/web/1185.html
转载地址:http://lgref.baihongyu.com/