浏览器缓存常用设置

最新推荐文章于 2025-03-24 17:03:12 发布
原创 最新推荐文章于 2025-03-24 17:03:12 发布 · 7.5k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#浏览器缓存常用设置 #缓存常用设置 #浏览器缓存

本文详细探讨了HTTP协议中的缓存控制，包括Cache-Control、Expires、Last-Modified和E-Tag等头部字段的作用及其对浏览器缓存的影响。通过多个表格展示了不同操作下浏览器的响应行为，强调了Cache-Control在缓存策略中的重要性，并提醒未设置缓存可能导致的复杂性和安全问题。

1. 设置缓存不可用

<%
response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
response.setHeader("Pragma","no-cache"); //HTTP 1.0
response.setDateHeader ("Expires", 0); //prevents caching at the proxy server
%>


2. 浏览器常用


HTTP协议中关于缓存的信息头关键字包括Cache-Control(HTTP1.1)，Pragma(HTTP1.0)，last-Modified，Expires等。

缓存控制头 Cache-Control

Cache-Control 是最重要的规则。这个字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令。这些指令指定用于阻止缓存对请求或响应造成不利干扰的行为。这些指令 通常覆盖默认缓存算法。缓存指令是单向的，即请求中存在一个指令并不意味着响应中将存在同一个指令。

cache-control 定义是：Cache-Control = “Cache-Control” “:” cache-directive。表 1 展示了适用的值。

表 1. 常用 cache-directive 值

Cache-directive说明
public所有内容都将被缓存
private内容只缓存到私有缓存中
no-cache所有内容都不会被缓存
no-store所有内容都不会被缓存到缓存或 Internet 临时文件中
must-revalidation/proxy-revalidation如果缓存的内容失效，请求必须发送到服务器/代理以进行重新验证
max-age=xxx (xxx is numeric)缓存的内容将在 xxx 秒后失效, 这个选项只在HTTP 1.1可用, 并如果和Last-Modified一起使用时, 优先级较高

表 2 表明在不同的情形下，浏览器是将请求重新发送到服务器还是使用缓存的内容。

表 2. 对 cache-directive 值的浏览器响应

Cache-directive打开一个新的浏览器窗口在原窗口中单击 Enter 按钮刷新单击 Back 按钮
public浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面浏览器重新发送请求到服务器浏览器呈现来自缓存的页面
private浏览器重新发送请求到服务器第一次，浏览器重新发送请求到服务器；此后，浏览器呈现来自缓存的页面浏览器重新发送请求到服务器浏览器呈现来自缓存的页面
no-cache/no-store浏览器重新发送请求到服务器浏览器重新发送请求到服务器浏览器重新发送请求到服务器浏览器重新发送请求到服务器
must-revalidation/proxy-revalidation浏览器重新发送请求到服务器第一次，浏览器重新发送请求到服务器；此后，浏览器呈现来自缓存的页面浏览器重新发送请求到服务器浏览器呈现来自缓存的页面
max-age=xxx (xxx is numeric)在 xxx 秒后，浏览器重新发送请求到服务器在 xxx 秒后，浏览器重新发送请求到服务器浏览器重新发送请求到服务器在 xxx 秒后，浏览器重新发送请求到服务器

Cache-Control是关于浏览器缓存的最重要的设置，因为它覆盖其他设置，比如 Expires 和 Last-Modified。另外，由于浏览器的行为基本相同，这个属性是处理跨浏览器缓存问题的最有效的方法。

过期头 (Expires)

Expires 头部字段提供一个日期和时间，响应在该日期和时间后被认为失效。失效的缓存条目通常不会被缓存（无论是代理缓存还是用户代理缓存）返回，除非首先通过原始 服务器（或者拥有该实体的最新副本的中介缓存）验证。（注意：cache-control max-age 和 s-maxage 将覆盖 Expires 头部。）

Expires 字段接收以下格式的值：“Expires: Sun, 08 Nov 2009 03:37:26 GMT”。如果查看内容时的日期在给定的日期之前，则认为该内容没有失效并从缓存中提取出来。反之，则认为该内容失效，缓存将采取一些措施。表 3-6 表明针对不同用户操作的不同浏览器的行为。

表 3. 当用户打开一个新的浏览器窗口时的失效操作

 Firefox 3.5IE 8Chrome 3Safari 4
内容没有失效浏览器呈现来自缓存的页面浏览器重新发送请求到服务器。返回代码是 200浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面
内容失效浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200

表 4. 当用户在原始浏览器窗口中单击 Enter 按钮时的失效操作

 Firefox 3.5IE 8Chrome 3Safari 4
内容没有失效浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面浏览器重新发送请求到服务器。返回代码是 304浏览器重新发送请求到服务器。返回代码是 304
内容失效浏览器重新发送请求到服务器。返回代码是 200浏览器呈现来自缓存的页面浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200

表 5. 当用户按 F5 键刷新页面时的失效操作

 Firefox 3.5IE 8Chrome 3Safari 4
内容没有失效浏览器重新发送请求到服务器。返回代码是 304浏览器重新发送请求到服务器。返回代码是 304浏览器重新发送请求到服务器。返回代码是 304浏览器重新发送请求到服务器。返回代码是 304
内容失效浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200

表 6. 当用户单击 Back 或 Forward 按钮时的失效操作

 Firefox 3.5IE 8Chrome 3Safari 4
内容没有失效浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面
内容失效浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面浏览器重新发送请求到服务器。返回代码是 200

注意：所有浏览器都假定为使用默认设置运行。

控制文件是否有修改 Last-Modified/E-Tag

Last-Modified 实体头部字段值通常用作一个缓存验证器。简单来说，如果实体值在 Last-Modified 值之后没有被更改，则认为该缓存条目有效。ETag 响应头部字段值是一个实体标记，它提供一个 “不透明” 的缓存验证器。这可能在以下几种情况下提供更可靠的验证：不方便存储修改日期；HTTP 日期值的 one-second 解决方案不够用；或者原始服务器希望避免由于使用修改日期而导致的某些冲突。

不同的浏览器有不同的配置行为。表 7-10 表明针对不同用户操作的不同浏览器的行为。

表 7. 当用户打开一个新的浏览器窗口时的 Last-Modified E-Tag 操作

 Firefox 3.5IE 8Chrome 3Safari 4
内容自上次访问以来没有被修改浏览器重新发送请求到服务器。返回代码是 304浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 304浏览器重新发送请求到服务器。返回代码是 304
内容自上次访问以来已经被修改浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200

表 8. 当用户在原始浏览器窗口中单击 Enter 按钮时的 Last-Modified E-Tag 操作

 Firefox 3.5IE 8Chrome 3Safari 4
内容自上次访问以来没有被修改浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面浏览器重新发送请求到服务器。返回代码是 304浏览器重新发送请求到服务器。返回代码是 304
内容自上次访问以来已经被修改浏览器重新发送请求到服务器。返回代码是 200浏览器呈现来自缓存的页面浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200

表 9. 当用户按 F5 键刷新页面时的 Last-Modified E-Tag 操作

 Firefox 3.5IE 8Chrome 3Safari 4
内容自上次访问以来没有被修改浏览器重新发送请求到服务器。返回代码是 304浏览器重新发送请求到服务器。返回代码是 304浏览器重新发送请求到服务器。返回代码是 304浏览器重新发送请求到服务器。返回代码是 304
内容自上次访问以来已经被修改浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200

表 10. 没有缓存设置且用户单击 Back 或 Forward 按钮

 Firefox 3.5IE 8Chrome 3Safari 4
内容自上次访问以来没有被修改浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面
内容自上次访问以来已经被修改浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面浏览器重新发送请求到服务器。返回代码是 200

注意：所有浏览器都假定使用默认设置运行。

不进行任何缓存相关设置

如果您不定义任何缓存相关设置，则不同的浏览器有不同的行为。有时，同一个浏览器在相同的情形下每次运行时的行为都是不同的。情况可能很复杂。另外，有些不该缓存的内容如果被缓存，将会导致安全问题。 不同的浏览器有不同的行为。表 11 展示了不同的浏览器行为。

表 11. 没有缓存设置且用户打开一个新的浏览器窗口

 Firefox 3.5IE 8Chrome 3Safari 4
打开一个新页面浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200
在原始窗口中单击 Enter 按钮浏览器重新发送请求到服务器。返回代码是 200浏览器呈现来自缓存的页面。浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200
按 F5 键刷新浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200
单击 Back 或 Forward 按钮浏览器呈现来自缓存的页面。浏览器呈现来自缓存的页面。浏览器重新发送请求到服务器。返回代码是 200浏览器重新发送请求到服务器。返回代码是 200

注意：所有浏览器都假定使用默认设置运行。

关键结论

最后, 概括下关键的结论

操作行为
打开新窗口如果指定cache- control的值为private、no-cache、must-revalidate,那么打开新窗口访问时都会重新访问服务器。而如果指定了 max-age值,那么在此值内的时间里就不会重新访问服务器,例如：Cache-control: max-age=5 表示当访问此网页后的5秒内再次访问不会去服务器.
在地址栏回车如果值为private或must-revalidate,则只有第一次访问时会访问服务器,以后就不再访问。如果值为no-cache,那么每次都会访问。如果值为max-age,则在过期之前不会重复访问。
按后退按扭如果值为private、must-revalidate、max-age,则不会重访问,而如果为no-cache,则每次都重复访问.
按刷新按扭无论为何值,都会重复访问.


Hexo一键部署到阿里云OSS并设置浏览器缓存
Jeffrey的博客
02-28 2592
自建博客地址：https://bytelife.net，欢迎访问！ 本文为博客自动同步文章，为了更好的阅读体验，建议您移步至我的博客???? 本文作者：Jeffrey 本文链接：https://bytelife.net/articles/52761.html 版权声明： 本博客所有文章除特别声明外，均采用BY-NC-SA许可协议。转载请注明出处！ 现在用Hexo来搭建静态站点的人越来越多了，很多人会选择试用Github Pages服务来部署自己的静态站，但Github Pages国内访问速度实在无.
HTTP首部 Cache-Control
lindaiyuw的博客
05-28 803
Cache-Control：控制缓存的行为 通过指定首部字段 Cache-Control 的指令，就能操作缓存的工作机制； Cache-Control指令可用于请求及响应时； 指令的参数是可选的，多个指令之间通过“，”分隔。 eg：Cache-Control：private，max-age=0，no-cache Cache-Control指令一览： 请求指令： 指令 参数...
http协议中缓存Cache-Control详解
jkzyx123的博客
03-27 2581
http协议中缓存Cache-Control
浏览器缓存机制
weixin_34310127的博客
05-14 513
文章转自: http://harry.javaeye.com/blog/605749 Cache-ControlCache-Control 是最重要的规则。这个字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令。这些指令指定用于阻止缓存对请求或响应造成不利干扰的行为。这些指令通常覆盖默认缓存算法。缓存指令是单向的，即请求中存在一个指令并不意味着响应中将存在同一个指令。cache-c...
cache-control 缓存
weixin_33894640的博客
12-25 416
  1、服务端设置 2、 3、所以一般设置css/js等静态文件加一个md5码。 4、优先级问题   如果服务器端同时设置了Etag和Expires 时，Etag原理同样，即与Last-Modified/Etag对应的HttpRequest Header:If-Modified-Since和If-None-Match。我们可以看到这两个Header的值和WebServer发出的...
js清除浏览器缓存的几种方法
10-20
另一种方法是通过AJAX的配置项cache设置为false，以及ifModified设置为true，这样AJAX请求将不会被浏览器缓存。 4. 应用随机数或时间戳 通过在URL参数后添加随机数或时间戳，可以有效避免浏览器缓存。例如，在请求...
浏览器缓存目录设置
02-21
### 浏览器缓存目录设置 在日常的网络浏览过程中，浏览器缓存的作用非常重要，它不仅能够提高网页加载速度，还能有效减少硬盘碎片的产生，进而提升整体系统的运行效率。本文将详细介绍如何针对不同浏览器（如Fire...
浅谈Ajax请求与浏览器缓存
10-21
综合来看，要有效利用浏览器缓存，前端开发者不仅要合理设置Ajax请求中的cache属性，还需要理解和运用HTTP缓存控制机制，包括Cache-Control和Expires头的设置。通过合理配置这些设置，可以在确保用户体验的同时，...
浏览器缓存浅讲
HGX-DJK
03-24 742
如果某些文件 在 1 秒钟以内，被修改多次的话，那么文件已将改变了但是 Last-Modified 却没有改变，这样会造成缓存命中的不准确。（2）因为 Last-Modified 的这种可能发生的不准确性，http 中提供了另外一种方式，那就是 Etag 属性。服务器在返回资源的时候，在头信息中添加了 Etag 属性，这个属性是资源生成的唯一标识符，当资源发生改变的时候，这个值也会发生改变。
什么是浏览器缓存（Browser Caching）？如何使用HTTP头来控制缓存？
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-30 1081
引言基本概念与作用浏览器缓存概述缓存的重要性HTTP缓存控制强制缓存示例一：设置Expires头示例二：设置Cache-Control头协商缓存示例三：使用ETag头示例四：客户端发送If-None-Match头示例五：使用Last-Modified头示例六：客户端发送If-Modified-Since头实际工作中的使用技巧技巧一：合理设置缓存时间技巧二：利用版本控制技巧三：使用Content Delivery Network (CDN)技巧四：避免使用no-store。
Cache-Control指令
bigbye的博客
11-10 1352
表示是否能缓存的指令 public指令 当指定使用public命令时，明确表明其他用户也可利用缓存 private指令 当指定private指令后，响应只以特定的用户作为对象，与public行为相反，对于非特定用户，代理服务器则不会返回缓存 no-cache 指令 使用该指令的目的是为了防止从缓存中返回过期的资源。 客户端发送的请求包含该指令，表示客户端不会接受缓存过的响应，中间的缓存服务器就必须把客户端请求转发给源服务器； 服务器返回的请求包含该指令，那么缓存服务器不能对资源进行缓存。源服务器以后将不再对
Cache-Control
光
07-25 882
Cache-Control 请求头的一种，定义对缓存的配置。 可缓存性 public：可在HTTP请求经过的任何地方进行缓存 private：只有发起请求的浏览器可进行缓存 no-cache：本地缓存需验证后才可使用 有效期 max-age=&amp;amp;amp;amp;amp;lt;seconds&amp;amp;amp;amp;amp;gt; 缓存存在最大时间 s-maxage=&amp;amp;amp;amp;amp;lt;seconds&amp;amp
缓存Cache-Control
m0_71902265的博客
01-14 5785
缓存
Cache -Control缓存
chengRantianxia的博客
08-05 1557
缓存简介 我们在用http访问时，会先发送一个请求，之后服务器返回一个应答。在开发者工具中，点击网络可以查看。 第一部分General是概要，包含请求地址，请求方式，状态码，服务器地址以及Referrer 策略。 第二部分是应答头部，是服务器返回的。 第三部分是请求头部，是客户端发送的。 这次我们从两个角度来看看http的缓存：缓存控制和缓存校验。缓存控制：控制缓存的开关，用于标识请求或访问中是否开启了缓存，使用了哪种缓存方式。缓存校验：如何校验缓存，比如怎么定义缓存的有效期，怎么确保缓存是最新的。
Cache-Control浏览器缓存
热门推荐
m_review的博客
05-12 1万+
描述 同一个标签页，打开 A 站点，访问 config 接口，正常；打开 B 站点，访问 config 接口，正常；通过浏览器后退返回 A 站点，访问 config 接口，数据异常，config 返回了 B 站点的数据。 测试站点数据 https://a.aaa.com https://b.bbb.com 分析 判断是否是前端问题 通过观察，后退时仍然向服务器发送了请求，调用了 config 接口，可以排除 判断是不是前端本地存储未更新 通过观察，config 接口返回的内容仍然是 B 站点的数据，排除本地
HTTP缓存（HTTP Cacheing）：缓存控制（Cache-Control）
RToax
10-11 2133
通过重新使用以前获取的资源，可以显着提高网站和应用程序的性能。Web缓存减少了延迟和网络流量，因此减少了显示资源表示形式所需的时间。通过使用HTTP缓存，网站变得更加敏感。
http cache-control
坚定目标，超越自我
10-03 1349
Cache-Control 是 HTTP 协议中用于控制缓存行为的重要头部字段。它定义了客户端和服务器端如何缓存资源，以及缓存的有效期。
Cache-control的说明
冷月宫主的专栏
02-12 578
Cache-control”常见的取值有private、no-cache、max-age、must-revalidate等 网页的缓存是由HTTP消息头中的“Cache-control”来控制的，常见的取值有private、no-cache、max-age、must-revalidate等，默认为private。其作用根据不同的重新浏览方式分为以下几种情况： （1） 打开新窗口 如果指定ca
Cache-Control 使用
xiegan110的博客
06-13 1464
Cache-Control 通用消息头字段，被用于在http请求和响应中，通过指定指令来实现缓存机制。缓存指令是单向的，这意味着在请求中设置的指令，不一定被包含在响应中。 Header type General header Forbidden header name no CORS-safelisted response-header yes 语法 指令不区分大小写，并且具有可选参数，可以用令牌或者带引号的字符串语法。多个指令以逗号分隔。 缓存请求指令 客户端可以在HTTP请求中使用的标准 Cache-
前端浏览器常用缓存
最新发布
07-01
### 浏览器缓存机制概述 浏览器缓存是前端性能优化的重要组成部分，通过减少网络请求来加快页面加载速度并降低服务器负载。浏览器缓存主要分为几种类型：Memory Cache、Service Worker Cache、HTTP Cache 和 Push Cache [^2]。 #### Memory Cache Memory Cache 是一种快速访问的缓存形式，它存储在内存中，因此读取速度快。当用户浏览网页时，最近使用的资源会被保存在这里，以便快速重新加载 [^2]。 #### Service Worker Cache Service Worker 提供了一种更强大的缓存机制，允许开发者编写脚本来控制缓存的行为。这使得即使在网络状况不佳的情况下，也可以提供良好的用户体验 [^1]。 #### HTTP Cache HTTP Cache 是基于HTTP协议的标准缓存机制，可以通过设置响应头中的 `Cache-Control` 或 `Expires` 来控制资源的缓存行为 [^4]。`Cache-Control` 相比于 `Expires` 更加灵活，并且优先级更高 [^5]。 #### Push Cache Push Cache 是HTTP/2的一部分，允许服务器主动推送资源到客户端缓存中，这样可以在未来的请求中更快地获取这些资源 [^2]。 ### 缓存策略设计 设计有效的缓存策略需要考虑多个因素，包括但不限于资源的更新频率、用户的地理位置以及预期的流量模式。常见的做法包括： - **强缓存**：通过设置 `Cache-Control: max-age=秒` 来指定资源的有效期，在此期间内，浏览器将直接从缓存中读取资源而不会向服务器发送请求 [^5]。 - **协商缓存**：当强缓存失效后，浏览器会发送一个带有 `If-None-Match` 或 `If-Modified-Since` 的请求来验证资源是否改变 [^1]。 ### 技术实现 为了实现上述缓存策略，可以采取以下技术措施： - 使用 `Cache-Control` 头来定义资源的缓存行为，例如 `Cache-Control: public, max-age=31536000` 表示资源可以在任何地方被缓存一年 [^4]。 - 对于经常变动的资源，使用 `Cache-Control: no-cache` 或者 `Cache-Control: must-revalidate` 来确保每次请求都需要重新验证资源的有效性 [^4]。 ### 高级优化 除了基本的缓存配置外，还可以利用 Service Workers 实现离线优先的应用体验，或者使用 HTTP/2 Server Push 来预加载关键资源 [^1]。 ```javascript // 示例 Service Worker 脚本用于缓存特定资源 self.addEventListener('install', event => { event.waitUntil( caches.open('my-cache').then(cache => { return cache.addAll([ '/index.html', '/styles/main.css', '/scripts/app.js' ]); }) ); }); self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request).then(response => { return response || fetch(event.request); }) ); }); ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值