阅读 181

关于HTTP缓存,看这一篇,你就可以筑基成功啦,哈哈哈

前两个星期我仔细看了一下缓存,昨天晚上突然一想,我发现我只记得304和cache了,这,我可能是老了,想起看别人的千千万万遍,不如自己整理一遍,好,准备开始了 . . .

首先,什么是缓存?

原始意义是指访问速度比一般随机存取存储器(RAM)快的一种高速存储器,通常它不像系统主存那样使用DRAM技术,而使用昂贵但较快速的SRAM技术。缓存的设置是所有现代计算机系统发挥高性能的重要因素之一百度百科。 Web 缓存大致可以分为:数据库缓存、服务器端缓存(代理服务器缓存、CDN 缓存)、浏览器缓存。浏览器缓存也包含很多内容: HTTP 缓存、indexDB、cookie、storage(localstorage、sessionStorage ) 等等。

好了,步入正题,http缓存:当用户第一次访问这个页面时,浏览器会把一些静态资源(图片、css以及一些js等)存起来(可能是磁盘也可能是内存)。当用户再次访问时直接从内存或是磁盘中取,从而节约网络的资源和提高加载速度。

缓存有什么好处?

  1. 可以提高加载速度,优化用户体验。
  2. 可以节约带宽,减少流量消耗。
  3. 减少服务器压力。

那浏览器缓存好处这么多,该怎么使用呢?

HTTP的缓存分为,强缓存和协商缓存,缓存方法不同,缓存的使用也不同

强缓存

当我们访问URL的时,不会向服务器发送请求,状态码还是为200,但不同的是在network的size这个地方显示的为 dist catch或memory cache 如下图。 FastStoneEditor.png 或者是在请求报头的status code 后面会标注 from dist catch 或 from memory cache,如下图

FastStoneEditor.png FastStoneEditor.jpg

expires

HTTP1.0控制网页缓存的字段,值为一个时间戳(格林尼治时间),当客户端再次发送请求时,与这个时间戳相比对,如果未超过过期时间,直接使用该缓存,如果过期了则重新请求。---缺点就是本地时间可以自己修改,或者服务器与客户端的时间不一致,导致判断缓存是否过期失效。

cache-control

翻译过来即缓存控制, HTTP1.1中控制网页缓存的字段。cache-control的优先级比expires高,换句话说,如果设置了cache-control的值,那么会优先使用cache-control里的缓存规则,常用值见下表

Cache-directive说明
public所有内容都将被缓存(客户端和代理服务器都可缓存)
private内容只缓存到私有缓存中(仅客户端可以缓存,代理服务器不可缓存)
no-cache必须先与服务器确认返回的响应是否被更改,然后才能使用该响应来满足后续对同一个网址的请求。因此,如果存在合适的验证令牌 (ETag),no-cache 会发起往返通信来验证缓存的响应,如果资源未被更改,可以避免下载。
no-store所有内容都不会被缓存到缓存或 Internet 临时文件中
must-revalidation/proxy-revalidation如果缓存的内容失效,请求必须发送到服务器/代理以进行重新验证
max-age=xxx (xxx is numeric)缓存的内容将在 xxx 秒后失效, 这个选项只在HTTP 1.1可用, 并如果和Last-Modified一起使用时, 优先级较高

协商缓存

客户端请求服务器,通过Last-Modified/E-Tag来判断资源有没有更新,如果资源没更新,则浏览器使用本地缓存,服务器返回304。

Last-Modified

最后修改,其值是一个时间戳(格林尼治时间),在请求的response header里,下次请求的时候会带上一个if-Modified-Since在request header里,后台取到这个字段之后判断是否用缓存,如果是可以用缓存就返回304,不能的话就返回200。

E-Tag

响应头部中的标识,用于表示资源内容唯一性的标识,该值由服务器生成,生成规则由服务器自行决定,一般是文件大小(size)、修改时间(time)、索引(index)等数据Hash后生成。在请求的response header里,下次请求的时候会带上一个if-None-Match在request header里,后台取到这个字段之后判断该资源是否为最新的,如果是就用缓存,如果不是则返回最新的资源。

感想:这大概是我写的最认真的一篇文章,感觉确实是要花蛮多时间去看资料的。

文章参考来源:

后续,如果你还想结丹往上的话,就还需要百度一些了

文章分类
前端
文章标签