图解从输入网址到显示页面中间发生了什么(一)

概述

从我们在地址栏中输入网址,如www.findme.wang,到页面显示中间发生了哪些过程呢?查询缓存、域名解析、三次握手、网络协议、新鲜度检查、HTTP协议、GET请求、DOM树、渲染树等一连串的关键字浮现在脑海中,于是简要的绘制了一副图如下:
这里写图片描述

相关说明

浏览器如何检查缓存是否存在

浏览器会依据请求的相关信息http header,经过一系列的计算作为Hash的key值,查询缓冲是否存在。

缓存控制细节

关于缓存,我看有的地方将其分类为强缓存和协商缓存,其实协商缓存就是对过期的缓冲一种处理方式,感觉没必要分类。

怎样判断缓存是否过期

浏览器在查找到缓存后,会检查cache-controlexpires来判断缓存是否过期,如下图。浏览器通过比较该值就能判断缓存是否过期。
这里写图片描述
两则区别如下:
Expires是老版本的HTTP协议中规定的,返回的是一个绝对时间,在服务器的时间与客户端的时间相差较大时,缓存管理容易出问题,当客户端修改本地时间,就会影响缓存命中的结果。于是在http1.1的时候,提出了Cache-Control,这是一个相对时间,在配置缓存的时候,以秒为单位,用数值表示,如:Cache-Control:max-age=1296000,其参数比较多,可以参考如下:
浏览器缓存机制剖析
当这两个属性Expires和Cache-Control同时存在时,Cache-Control优先级高于Expires。

缓存的新鲜度检查

当浏览器首次向服务器发送请求的时候,服务器响应的http头部会携带,Last-ModifiedETag
这里写图片描述
当缓存过期的时候,浏览器就会将该两个参数的值以If-Modified-SinceIf-None-Match形式写在HTTP头中,发服务器请求资源。其中If-Modified-Since是与Last-Modified相互对应,If-None-MatchETag相互对应,。为了演示,我们通过下图方式复制浏览器请求
这里写图片描述
请求内容如下,有状态码304,可以看出,这是在检查缓存的新鲜度。复制的请求头,删除cookie后的信息如下:

GET /Public/Home/css/blog.css HTTP/1.1
Host: www.findme.wang
Connection: keep-alive
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36
Accept: text/css,*/*;q=0.1
Referer: http://www.findme.wang/Blog/detail/id/181.html
Accept-Encoding: gzip, deflate, sdch
Accept-Language: zh-CN,zh;q=0.8
If-None-Match: "b410bb-cdf-54d69e0160e80"
If-Modified-Since: Tue, 18 Apr 2017 05:06:50 GMT

然后通过命令提示符中telnet模拟请求,如下图:
这里写图片描述
从上图,可以看出,当服务器匹配到相应的资源,且发行资源并没有修改的时候,并不会返回资源具体的信息,而是返回304,即资源并没有修改。

后期补充

由于时间限制以及自己对下面一块了解也不是很透彻,需要查阅更多的资源以下内容,将会在后期补充上。
1.客户端与服务器的连接与断开连接
2.浏览器的渲染过程(同时介绍一下rectJS相关内容)
3.mac地址查询

—-有不对的地方,请各位不吝赐教—-

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值