浏览器缓存

浏览器缓存(从缓存中去加载资源,这时响应的http code 为 304)

访问网页时,需要从服务器下载一些页面渲染所需的资源,如html文档,css,js,图片等,有些资源是很少变动的,如果将其缓存下来,就可以减少服务器的负载,而且页面加载时间也会缩短。

浏览器缓存分类:

1.强缓存,

强缓存是利用 Expires 和 Cache-Control 这2个字段来控制的,控制资源缓存的时间,在有效期内不会去向服务器请求了。

由于Expires 是依赖于客户端系统时间,当修改了本地时间后,缓存可能会失效,所以一般情况,我们认为使用 Cache-Control 是更好的选择。

Cache-Control 给 Cache-Control 设置 max-age ,表示缓存的最长时间是多少秒,定义的是时间的长短,它描述的是时间,表示的是一段时间间距,是一个相对时间。

Cache-Control 与 Expires 可以在服务端配置同时启用,也就是说在 response header 中,Expires 和Cache-Control 是可以同时存在,当它们同时启用的时候Cache-Control 优先级更高。

2.协商缓存,

协商缓存是由服务器来确定缓存资源是否可用,当然了,需要服务器和客户端一起配合。服务器可在 response header 中包含Last-Modified字段或者ETag字段。

Last-Modified / If-Modified-Since

Last-Modified 表示被请求资源在服务器端的最后一次修改时间,当再次请求该资源的时候,浏览器的request header中会带上If-Modified-Since,如果请求中包含 If Modified Since,就说明已经有缓存在客户端。服务端只要判断这个时间和当前请求的文件的修改时间就可以确定是返回 304 还是 200,虽然在返回 304 的时候已经做了一次数据库查询,但是可以避免接下来更多的数据库查询,并且没有返回页面内容而只是一个 HTTP Header,从而大大的降低带宽的消耗,对于用户的感觉也是提高。

ETag/If-None-Match

每次文件修改后服务端那边会生成一个新的 ETag ,是一个唯一文件标识符,当再次请求该资源时候,浏览器的request header中会带上If-None-Match ,这值就是之前返回的ETag ,把这个值发送到服务器,询问该资源 ETag 是否变动,有变动的话,说明该资源版本需要更新啦,客户端不能继续用缓存里的数据了。

 

总之,浏览器会根据 http response header 中的 Expires 和cahe-control 字段判断是否命中强缓存,如若命中,则直接从缓存中取资源,不会再去向服务器请求了。否则(没有命中强缓存),浏览器会发出一个条件请求,浏览器会在请求头中包含 If-Modified-Since 或 If-None-Match 字段,If-Modified-Since 即浏览器当初得到的 Last-Modified;If-None-Match即浏览器当初得到的 ETag。当服务器发现资源的更新时间晚于 If-Modified-Since 所提供的时间,或者资源在服务器端当前的 ETag 和 If-None-Match 提供的不符时,说明该资源需要向服务器重新请求了。否则,浏览器将不需要重新下载整个资源,只需要从缓存中去加载这个资源,这时响应的http code 为 304(304 Not Modified)。

posted @ 2019-06-11 14:01  但沉默。  阅读(151)  评论(0编辑  收藏  举报