vlambda博客
学习文章列表

一、浏览器从哪读取缓存

• memory cache

当直接刷新页面的时候，页面资源会从内存中直接获取。

• disk cache

如果服务器指定了强缓存它会缓存到硬盘上，如果网页关掉再打开浏览器会从磁盘上去加载资源。

二、缓存的分类

强缓存、文件资源直接从缓存中获取

• cache-control: max-age=600

cache-control响应头，max-age=600是缓存600s的意思. 不设置的话默认缓存时间是4天，在这个时间段浏览器不会去服务器获取数据，直接从缓存中获取。对于JS，CSS等文件可以设置成强缓存。

• expires: Mon, 14 Sep 2021 19:12:22 GMT

expires响应头，功能没有cache-control强大，当cache-control和expires都设置了的时候，只会生效cache-control。

协商缓存，访问服务器是否从浏览器缓存中获取

• last-modified: Fri, 07 Aug 2021 22:15:19 GMT

服务器告诉浏览器资源最后的修改时间

• if-modified-since: Fri, 07 Aug 2021 12:25:49 GMT

当浏览器请求数据时会带上浏览器上次请求数据的修改时间，服务器会把这个时间和当前文件最后修改时间作对比，如果修改时间一致说明浏览器之前拿到的是最新文件，则返回304状态码告诉浏览器从缓存中读取，如果浏览器拿到的时间比服务器修改的时间要早那么说明浏览器目前缓存的不是最新文件，则把该文件发送给浏览器并返回200状态码。

• etag: W/“5f2cbe0f-2382"

当服务器返回响应的时候会告诉浏览器文件etag的值，etag类似一种hash值，它代表文件内容。

• if-none-match: W/“5f2cbe0f-2382”

当浏览器去服务器请求资源的时候，会带上服务器上次返回的etag值，服务器根据这个etag值和当前资源的etag值进行对比.如果一致说明文件没有变动，返回304状态码，如果不一致说明有变动返回200状态码。

默认nginx是开启etag和last-modified的。

三、Nginx下配置文件的缓存方式

http { # 开启gzip gzip on; # 启用gzip压缩的最小文件；小于设置值的文件将不会被压缩 gzip_min_length 1k; # gzip 压缩级别 1-10  gzip_comp_level 2; # 进行压缩的文件类型。 gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; # 是否在http header中添加Vary: Accept-Encoding，建议开启 gzip_vary on; # etag协商缓存 默认是开启的 etag on;}

server { # html设置成协商缓存或者不缓存 location ~* \.(html)$ { # 关闭访问日志 access_log off; # 添加响应头,no-cache:协商缓存,no-store:不缓存 add_header Cache-Control max-age=no-cache;  } # 特定文件设置强缓存 location ~* \.(css|js|png|jpg|jpeg|gif|gz|svg|mp4|ogg|ogv|webm|htc|xml|woff)$ { access_log off;    add_header  Cache-Control  max-age=360000; # 4天 }}

扩展

• Expires

服务端返回的到期时间，分为“相对文件的最后访问时间”和“绝对修改时间”

• Cache-Control

private

public

max-age=xxx：缓存内容在xxx秒后失效

no-cache：需要用另一种缓存策略来验证缓存(ETag,Last-Modified)

no-store：不进行缓存

• Last-Modified

浏览器请求获得文件后，服务器返回该文件的最后修改时间Last-Modified

下一次请求会带上If-Modified-Since标识，如果If-Modified-Since等于服务器的文件修改时间，则表示文件没有修改，返回304状态码。

浏览器从浏览器缓存中读取文件。如果If-Modified-Since小于服务端的文件修改时间，则浏览器会重新发送请求获取文件，返回状态码200。

• Etag

服务器文件的唯一标识

服务器返回Etag字段给浏览器，当文件变化时Etag值也会发生变化。

下次请求会带上If-None-Match即浏览器保留的ETag值，如果发送了变化，则文件被修改，需要重新请求，返回200状态码。

反之浏览器就从缓存中读取文件，返回304状态码。

四者区别

当Cache-Control设置为max-age=xx并且同时设置Expires时，Cache-Control的优先级更高。

当ETag和Last-Modified同时存在时，服务器先会检查ETag，然后再检查Last-Modified，最终决定返回304还是200。