浏览器缓存常用设置

本文详细探讨了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,则每次都重复访问.
按刷新按扭无论为何值,都会重复访问.


在Node.js中设置浏览器缓存可以通过设置HTTP响应头来实现。以下是一种常见设置浏览器缓存的方法: 1. 首先,你需要使用Node.js的HTTP模块创建一个HTTP服务器。可以使用以下代码创建一个简单的HTTP服务器: ```javascript const http = require('http'); const server = http.createServer((req, res) => { // 处理请求并发送响应 }); server.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` 2. 在处理请求并发送响应的代码中,你可以设置响应头来控制浏览器缓存。以下是一些常用的响应头设置: - 设置Cache-Control头:Cache-Control头用于指定缓存的行为。例如,可以设置`Cache-Control: public, max-age=3600`来指定资源可以被公共缓存,并且在缓存中保留1小时。 ```javascript res.setHeader('Cache-Control', 'public, max-age=3600'); ``` - 设置Expires头:Expires头用于指定资源的过期时间。例如,可以设置`Expires: Wed, 21 Oct 2022 07:28:00 GMT`来指定资源在指定时间之后过期。 ```javascript res.setHeader('Expires', 'Wed, 21 Oct 2022 07:28:00 GMT'); ``` - 设置ETag头:ETag头用于指定资源的唯一标识符。浏览器可以使用ETag头来验证资源是否已更改。例如,可以设置`ETag: "abc123"`来指定资源的ETag。 ```javascript res.setHeader('ETag', 'abc123'); ``` 3. 根据你的需求,可以根据请求的URL或其他条件来动态设置响应头。例如,可以根据请求的URL来设置不同的缓存策略。 ```javascript if (req.url === '/static/css/styles.css') { res.setHeader('Cache-Control', 'public, max-age=86400'); // 缓存静态CSS文件1天 } else if (req.url === '/static/js/main.js') { res.setHeader('Cache-Control', 'public, max-age=604800'); // 缓存静态JS文件1周 } else { res.setHeader('Cache-Control', 'no-cache'); // 不缓存其他资源 } ``` 这只是一个简单的示例,你可以根据你的具体需求进行更复杂的设置
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值