WdBly Blog

懂事、有趣、保持理智

WdBly Blog

懂事、有趣、保持理智

周维 | Jim

603927378@qq.com

Http之浏览器缓存

浏览器缓存详解,针对http头信息的分析,和多种浏览器缓存方式介绍

浏览器缓存(Browser Caching)

浏览器缓存是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制,有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据,浏览器的缓存方式有很多种,可以通过chrome下Application查看浏览器缓存。

Http缓存

http缓存是基于HTTP协议的浏览器文件级缓存机制。如web中常用的文件.html .js .css .png .jpg 浏览器可以根据资源请求(request)和响应(response)头中的属性判断是从服务器获取资源还是加载本地的资源,chrome控制台下的Applictation/Frames即展示的是浏览器的http文件级缓存。浏览器在有缓存的情况下获取资源分为三步:
盗用一张图:

image.png

缓存过程

1、Expires/Cache-Control

Expires属性是HTTP控制缓存的基本手段,Expires是在服务端配置的Http头信息,其值是一个确定的时间,在这个时间内浏览器都会从本地缓存中读取文件,不会发送Http请求。可以设置一个永不过期的过期时间,然后通过版本号来控制。

Expires/Cache-Control Header是控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。只是Cache-Control比Expires可以控制的多一些, 而且Cache-Control会重写Expires的规则。

2、ETag/If-None-Match

在http request header中带有If-None-Match服务器会对ETagIf-None-Match进行对比,若是没有改变则返回304 Not Modified浏览器读取缓存。否则返回200 获取新数据。

当浏览器向服务器请求资源时,服务器根据文件内容计算出一个hash值并通过Etag返回给浏览器,浏览器将文件和Etaghash值保存下来,当再次请求此资源时,浏览器会将存下来的hash值放入If-None-Match字段中发送到服务端,服务端接收到请求后重新计算资源的hash值并和If-None-Match的值进行比较,若是相同则返回304,否则返回200同时返回新的Etag

由于服务端每次在每个请求中都去计算文件的hash值,对服务器资源的消耗较大,所以有很多服务器都是关闭了Etag选项的。

3、last-modified/if-modified-since

当浏览器向服务器请求资源时,服务端在该资源返回头中添加last-modified字段标识资源在服务器最后修改时间。浏览器将此值存储下来。

浏览再次请求此资源时,将存下来的last-modified放在if-modified-since字段中发往服务端,询问在此时间后资源是否有更改,若无,服务端返回304,否则返回200和新的last-modified