HTTP缓存和jQuery中的cache详解

之前面试的时候有被文档jquery ajax中cache选项的问题,面试的时候没有能够答出来,面试结束以后查了一些HTTP、jquery缓存相关方面的内容,自己做了一些测试和总结。

参考博客:
彻底弄懂HTTP缓存机制及原理
jQuery中的cache : false到底有什么用?

直入主题:HTTP中的缓存属性

HTTP中的缓存是指客户端或者代理服务器上的缓存,浏览器在获取到数据之后会将数据缓存到本地,下一次访问请求相同的后端API(也包括html、css、js文件,有时候我们在localhost上测试的时候更改了css,但是刷新页面不会生效,这就是由于浏览器默认会进行缓存)的时候会先去查找缓存。

只有get请求会有缓存,post请求不会有缓存

客户端的缓存遵循一定的规则,这些规则由Expires/Cache-control头来决定。Expires的值是到期时间(用日期时间来表示),由服务器来指定,不过Expires是HTTP1.0中的东西,HTTP1.1中使用Cache-Control来控制。

Cache-Control

Cache-Control的取值有private、public、no-cache、max-age、no-store,默认值是private
同时Cache-Control是一个通用首部,也就是请求首部和返回首部都可以设置这个值(一般由服务器指定)。

说明
private 属性可以缓存,默认值
public 客户端和代理服务器都可以缓存
max-age=xxx 返回的的内容将在xxx表后失效
no-cache 需要请求服务器来判定是不是使用缓存,在后面介绍
no-store 所有内容都不会缓存

Cache-Control 与下面的两种方法的区别

Cache-Control的优先级比下面介绍的两种方式的优先级高。也就是同时设置时Cache-Control生效。当Cache-Control设置为no-cache的时候,采用下面的方式进行是否使用缓存的判断。可以只设置下面的两种方式。

Last-Modified/If-Modified-Since

Last-Modified

服务器在响应请求的时候,告诉浏览器最后修改时间。

If-Modified-Since

再次请求服务器的时候,通过此字段同之服务器上次请求时服务器返回的资源最后修改时间。
服务器收到请求以后将If-Modified-Since与资源的最后修改时间进行比对,如果最后修改的时间大,说明资源改动过,返回最新的资源,状态码为200.
否则,使用缓存的资源,服务器不会返回资源,返回的状态码为304.

Etag/If-None-Match

Etag

服务器响应请求时,告诉浏览器当前资源在服务器的唯一标识(生成规则由服务器决定)。
在这里插入图片描述

If-None-Match

再次请求服务器时,通过此字段通知服务器缓存数据的唯一标识。
服务器收到请求后将请求中If-None-Match的值与被请求资源的唯一标志进行比对,不同,说明资源又被改动过,则响应整片资源内容,返回状态码200;
相同说明资源无新修改,则返回状态码304,浏览器使用cache中的值。

扫描二维码关注公众号,回复: 5287773 查看本文章

jQuery ajax中的Cache选项

如果将Cache选项设置成false,jQuery会自动在url请求参数后面加一串随机码(保证Url不重,这样就不会触发缓存机制),同时会在请求头中设置Cache-Control属性为no-cache(进行资源新鲜度的比对)
在这里插入图片描述

总结

  • 在HTTP的缓存机制中,使用Cache-Control/Expires中的规则时,如果满足规则,则不会请求服务器端(除了no-cache和no-store),而其他两种方式都会请求服务器端查看资源的新鲜度,如果资源没有被修改,则返回304且没有响应体,浏览器使用缓存中的资源。如果新鲜度过期了则返回200且响应体是最新的内容。

  • jQuery中的cache选项,如果取值为false则通过改变url来避免使用缓存。

猜你喜欢

转载自blog.csdn.net/weixin_37994110/article/details/87885252
今日推荐