Http请求中的强缓存与协商缓存

in OS/Network with 0 comment

缓存的优点

浏览器是如何使用缓存

微信图片_20210426105413.png

微信图片_20210426105434.png

Nginx配置

ETag/Last-Modified 是nginx默认配置好的, response的时候直接返回的

#如果设置了expires，则response的时候会多一个Cache-Control和Expires
location ~ .*\.(js|css)?$
{
    expires  12h;
}

强缓存与协商缓存

第一次请求服务器，服务器会返回Expires/Cache-Control，ETag/Last-Modified放缓存到本地。

强缓存：是指服务器那边设置的expires，客户端发送请求时会查看过期时间Expires/Cache-Control，如果没有超过max-age则会从本地cache(memory/disk)中去取，状态码：Status Code: 200 OK (from disk cache) 不会再请求一次服务器，这就是强缓存。

协商缓存：是指客户端发送请求时会查看过期时间Expires/Cache-Control，超过了max-age指定的时间，这时就会发送请求到服务器，服务器那边会比对ETag/Last-Modified，前者优先级高，如果发现比较结果一致，即服务器这边没有做修改，则返回304 not Modified,同时返回新的Expires/Cache-Control，ETag/Last-Modified 缓存到本地，如果修改过则直接返回200。

Cache-Control和Expires

Cache-Control 是http1.1的头字段，Expires 是http1.0的头字段, 如果Expires 和Cache-Control同时存在，Cache-Control会覆盖Expires，一般两个都写（默认）。

ETag/If-None-Match

Etag是属于HTTP 1.1属性，它是由服务器（Apache/Nginx）生成返回给前端，用来帮助服务器控制Web端的缓存验证。
Apache中，ETag的值，默认是对文件的索引节（INode），大小（Size）和最后修改时间（MTime）进行Hash后得到的。

当资源过期时，浏览器发现响应头里有Etag,则再次像服务器请求时带上请求头If-None-Match(值是Etag的值)。服务器收到请求进行比对，决定返回200或304 not modified

Last-Modifed/If-Modified-Since

Last-Modified：浏览器向服务器发送资源最后的修改时间。

If-Modified-Since: 当资源过期时（浏览器判断Cache-Control标识的max-age过期），发现响应头具有Last-Modified声明，则再次向服务器请求时带上头If-Modified-Since，表示请求时间。经过比对决定返回200还是304。

缓存200状态码

访问缓存到底是返回 200 OK (from disk cache) 还是 200 OK (from disk disk)是浏览器决定的。

Status Code: 200 OK (from disk cache): 不访问服务器，一般已经加载过该资源且缓存在了内存当中，直接从内存中读取缓存。浏览器关闭后，数据将不存在（资源被释放掉了），再次打开相同的页面时，不会出现from memory cache

Status Code: 200 OK (from disk disk): 访问服务器，已经在之前的某个时间加载过该资源，直接从硬盘中读取缓存，关闭浏览器后，数据依然存在，此资源不会随着该页面的关闭而释放掉下次打开仍然会是from disk cache

Webpack打包的hash值是什么作用

主要是为了避免强缓存没有过期，但文件内容已经修改，会默认从本地读取缓存的问题。

Webpack打包时比如将js,css文件都进行contenthash，则这时如果强缓存还没有过期的情况下，这时请求html时会重新请求新的js/css文件，如果强缓存过期，则还是会去查看ETag/Last-Modifed，这样也可以不加hash也会返回新的内容，但强缓存没法保证，并且强缓存一般缓存时间比较长，所以要用contenthash值。

本文由 dealdot ＜dealdot＃163.com＞ 创作, Full Stack Developer @ DeepBlue
本文最后编辑时间为: Apr 27, 2021 at 10:39 am
转载请注明来源

评论已关闭.