我们都知道为了有效地提高页面打开的速度以及减少不必要的网络带宽消耗,浏览器采用了缓存机制。意味着,如果在资源的有效时间内,发起了对这个资源的再一次请求,那么浏览器会直接使用缓存的副本,而不是向服务器发起请求。
目前缓存机制可以分为两种,一种是强缓存策略,另外一种是协商缓存策略。
强缓存
两种方式:
- http头信息中的
Expires
属性
指定了资源的过期时间,只要在过期时间内请求,资源就可以直接从缓存中提取,而不需要向服务器发送请求,但是可能会存在时间不一致的情况而影响缓存结果
- http头信息中的
Cache-Control
属性
它可以通过设置max-age,通过计算与第一次请求时间的差距来决定资源过期时间。比Expires
属性更加有效一些,有很多不同的方法,比如说private,只能被客户端缓存,no-store来指定资源不能够被缓存等。
当两种方式同时使用时,Cache-Control
的优先级比Expires高
协商缓存
先向服务器发送请求,如果资源未修改,则让浏览器使用本地的缓存,若资源发生修改,则返回修改后的资源。
也有两种方式:
- http头信息中的
Last-Modified
属性
该属性是用来指出资源最后一次的修改时间,当浏览器发出请求时,会比较上一次资源返回的时间与这次时间的,以此来判断资源是否更新,但是时间只能精确到秒,当一秒内发生资源修改的话,就无法准确判断了。
- http头信息中的
Etag
属性
在头信息中添加该属性,可以当作资源的唯一标识符,如果资源发生改变的话,标识符也会相应发生改变,从而对比etag值即可,这种方式比Last-Modified 更为准确一些。
当 Last-Modified 和 Etag 属性同时出现的时候,Etag 的优先级更高
Ajax中解决浏览器缓存的方法:
- 在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。
- 在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")