浏览器缓存初识...

339 阅读6分钟

大家好我是练习时长。。。。搞错了再来 ! 大家好,么系渣渣辉 贪玩蓝月这系你没有玩过的全新版本,开局一把刀装备全靠爆一刀999系兄弟就来砍我

缓存

浏览器缓存可解决大流量请求下服务器负担问题 和请求速度优化 常见的是配合使用cdn加载静态资源...

cdn

举个例子,在很早之前,网络购物的时候包括现在的个人商家在发货的时候都是从自己所在城市发快递给你,这样的话每个商家和自己的距离就很不一致,导致快递速度有早有慢(对应的就是你访问网站时的网络请求速度)

CDN概念放到快递当中,就例如现在的京东快递,京东在全国很多地方都建立的有京东的货仓,当你下单的时候会找到离你收货地址最新的货仓进行发货,有效的提高了效率...这也可能是京东的一大特色吧...(就是快嘻嘻)

当离你最近的货仓如果没有你要购买的东西时系统就会从离当前货仓最近的货仓去给你临时调用(这个分情况的) 如果都没有...那么就会去总货仓给你发货(我没遇到过...应该是这样,排除没货的状态)

总的来说就是要提升速度。。

以上例子中

  • 收货人与收货地址 相当于你自己和使用的浏览器,App等等...
  • 你要购买的物品 相当于与网络中请求的资源
  • 离你最近的京东货仓 相当于cdn节点
  • 总仓库 相当于 cdn源站(加速的服务器节点)

在现实情况下,一个网站如果同时被大量用户请求,在不考虑服务器是否能支撑得住的情况下,每个用户距离服务器的距离都不同 (你在武汉下单,京东不在武汉仓库给你发货跑到北京去你也不愿意吧), 速度会有快有慢,满的时候会非常影响用户的体验(等得久了,直接×了),回过头来大量的请求还可能导致服务器直接崩溃

cdn有效的解决了一部分问题...(我也不敢确定)

cdn缓存

加入cdn服务后(例如阿里云cdn服务),你的请求不再跑到源服务器上请求,会去离你最近的cdn节点服务器上去请求。如果cdn节点上没有你要的资源或资源已经过期,那么它会去源站上获取最新的资源返回给你并且将这个资源缓存起来,下次请求的时候直接给你...

如上cdn请求成功后.一般此次请求的响应头上会包含一些缓存所使用的字段,在浏览器缓存中会说

cdn配置与刷新缓存

cdn服务商一般都会提供设置 缓存文件的规则 缓存的时间 和刷新缓存的的接口供开发者使用


浏览器缓存

浏览器缓存是指浏览器通过http响应头的设置,将资源缓存到本地的行为

浏览器缓存访问过程以及优先级

  1. 先在本地内存查询缓存是否存在 存在加载不存在继续向上(和DNS过程很像...)
  2. 本地硬盘中查询 同上
  3. http请求 并根据http响应头缓存本次资源

浏览器缓存又分为强缓存与协商缓存,意思也很清除

  • 强缓存 状态码 200(from cache) | 强制缓存
  • 协商缓存 状态码304(not modified) | 商量着来

强缓存

强缓存的字段有

  • expires
  • cache-control

expirescache-control 同时设置的情况下 cache-control权重优先级更高

expires

expires是http1.0中的规范,值为一个GMT格式的时间字符串 (new Date() 返回的好像就是..),如果发送请求的时间没有超过expires,那么会直接使用,根本不发送请求...有一些弊端,如果服务器时间与客户端时间不一致或者修改本地机器时间会发生一些不可预料或意料之外的事情

cache-control

cache-control是http1.1中的特性,他的多个不同的值

  • max-age 设置一个以秒为单位的整数,通过资源请求的时间+过期时间(max-age)计算=过期时间,如果下次请求没有超过这个时间则命中缓存,否则请求服务器...zzzz~~~
  • no-cache 使用协商缓存,请求服务器之前的缓存资源是否可以使用(如果之前的想用头上有Etag字段会带上,和服务区单验证文件是否改变),如果未更改继续使用,更改返回新的资源与Etag值
  • no-store 进制浏览器缓存,每次的请求都会返回完整的资源内容。
  • public 所有用户或其他...都可缓存
  • private 只允许用户(浏览器)缓存,其他不行例如cdn

协商缓存

协商缓存指的是每次请求都要和服务器商量一下是否可以使用缓存资源(当然也会带着相应的字段) | Etag优先级比Last-Modifired高,会验证Etag 一致后才会验证Last-Modifired

响应头字段

  • Last-Modifired
  • Etag

请求头字段

  • If-Modifired-Since
  • If-None-Match

当第一次请求文件时会返回Last-ModifiredEtag字段,后续请求该文件会自读带上If-Modifired-SinceIf-None-Match,如果第一次响应头无这两个字段,后续请求也不会带上...

Last-Modifired && If-Modifired-Since

请求的步骤为

  1. 浏览器首次请求https://xxx.com/public/jquery.js文件,浏览器正常返回此资源的同时会在响应头上添加Last-Modifired 字段,此字段代表资源在服务器上最后一次修改的时间
  2. 浏览器刷新再次请求此文件资源时,在请求头上会自动添加If-Modifired-Since字段,这个字段的值就是上次请求返回的Last-Modifired的值,是一个GMT时间格式字符串
  3. 服务器收到2中资源请求时,根据If-Modifired-Since的值与系统中文件最后修改的时间来判断是否命中缓存(是否无变化),如果无变化则返回304状态,无额外的响应头,如果变化了返回最新的文件资源并在响应头上加上最新的Last-Modifired值,下次请求继续执行从2开始的过程... 浏览器收到304响应,就会使用缓存中的资源

Etag && If-None-Match

这两个字段如上述的两个字符段用法差不多相同,返回的是资源的标识字符串,不同的是在请求过程中无论文件是否改变过,则每次都会返回新的Etag值

Last-Modifred && Etag

这两个字段非常的相似.Etag是http1.1才出现的,其作用和Last-Modifred肯定有些不同. Etag是根据资源内容生成的唯一字符查,Last-Modifred返回的是文件最后修改时间.这可能会产生一些问题等等...


最后读起来感觉狗屁不通,第一次写......太难了我去配点图