记录chrome network面板的学习过程

原文档地址

禁用缓存

在chrome 53中,如果选中了network面板里面的Disable cache,那么,浏览器发送的请求中的Cache-Control会产生变化

st=>start: 是否禁用缓存
cond=>condition: Yes or No?
op1=>operation: Cache-Control:no-cache
op2=>operation: Cache-Control:max-age=0

st->cond
cond(yes)->op1
cond(no)->op2

使用no-cache的目的是为了防止从缓存中返回过期的资源
<图解HTTP>这一本书中,提到过:
no-cache: 强制向源服务器再次验证
max-age=[秒]: 响应的最大Age值

其实,我觉得值得考究的是max-age=0no-cache具体的差异在哪里?

后来面向stackoverflow编程后,我得到了如下总结:
max-age用于指示多少秒后验证一次资源的有效性,等于0表示立即向服务器验证资源的有效性,如果服务器返回的响应是304,那么浏览器可以直接使用缓存中的数据,然后no-cache表示我只要最新的资源,不会使用浏览器缓存中的资源,并且服务器不必验证资源的有效性.

View resource initiators and dependencies

这一章挺有意思的,讲的是你按住shift键后把鼠标移动到网络面板中的一个资源上(先暂时把他叫做target),别的资源有可能会出现绿色或则是红色的底,绿色底的资源表示它是targetinitiator(感觉可以把它翻译为发起请求target这个资源的资源,比如html中加载了一张图片,那么html可以当做initiator,图片可以当做target),红色底的资源表示是target的依赖(比如html文件中加载了cssjs文件,那么cssjs文件就都是html的依赖)
用chrome开发者中心的文档来解释一下:

Paste_Image.png

当查看dn/这个资源的时候,出现了两个绿色底的资源,rs开头的这个资源是initialtor,同时,www.google.com也是rs这个资源的initialtor.因为dn/这个资源需要下载dn.js所以dn.js显示红色.

后续

当然,文档里面还有很多有意思的东西,这里就不一一列出来了,我觉得,有很多东西,都是遇到问题的时候,多想想,也就能记起之前看过的好的工具,多用熟练起来后,才能把它牢牢地记载脑子里.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,107评论 19 139
  • 针对浏览器的http缓存的分析也算是老生常谈了,每隔一段时间就会冒出一篇不错的文章,其原理也是各大公司面试时几乎必...
    单纯的土豆阅读 408评论 0 2
  • 浅谈浏览器Http的缓存机制 ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ 针对浏览器的http缓存的分析也算是老生常谈了,每隔...
    meng_philip123阅读 1,068评论 0 10
  • 哈哈哈
    杨传蕊阅读 262评论 0 0
  • 据说辛夷一名的由来,有一个生动的故事。相传古时候,四川省有位举人经常头晕目疼,鼻孔流脓,百方无效。有一天,他来到夷...
    云蓝cqh阅读 1,339评论 0 0