- 浏览: 427452 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
xiaomuxingren:
你好,请问update-alternatives --inst ...
JDK8安装及jenkins安装 -
wahahachuang8:
我觉得这种东西自己开发太麻烦了,就别自己捣鼓了,找个第三方,方 ...
HTML5 WebSocket -
晨曦的朝阳:
刚好有需求,学习一下!
MySql主从配置 -
mfkvfn:
这是恶意的商业竞争呀
解决 android 微信5.0及后续版本无法打开电话号码的问题 -
fwyhf:
require('./monitor/module_liste ...
NodeJS Server 进程自动重启
同时参考的是W3C RFC2616规范中的
HTTP1.1/HEADER说明
利用 HTTP Cache来优化网站
缓存控制头 Cache-Control
Cache-Control 是最重要的规则。这个字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令。这些指令指定用于阻止缓存对请求或响应造成不利干扰的行为。这些指令 通常覆盖默认缓存算法。缓存指令是单向的,即请求中存在一个指令并不意味着响应中将存在同一个指令。
cache-control 定义是:Cache-Control = “Cache-Control” “:” cache-directive。
表 1 展示了适用的值。
表 2 表明在不同的情形下,浏览器是将请求重新发送到服务器还是使用缓存的内容。
表 2. 对 cache-directive 值的浏览器响应
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. 当用户打开一个新的浏览器窗口时的失效操作
表 4. 当用户在原始浏览器窗口中单击 Enter 按钮时的失效操作
表 5. 当用户按 F5 键刷新页面时的失效操作
表 6. 当用户单击 Back 或 Forward 按钮时的失效操作
注意:所有浏览器都假定为使用默认设置运行。
控制文件是否有修改 Last-Modified/E-Tag
Last-Modified 实体头部字段值通常用作一个缓存验证器。简单来说,如果实体值在 Last-Modified 值之后没有被更改,则认为该缓存条目有效。ETag 响应头部字段值是一个实体标记,它提供一个 “不透明” 的缓存验证器。这可能在以下几种情况下提供更可靠的验证:不方便存储修改日期;HTTP 日期值的 one-second 解决方案不够用;或者原始服务器希望避免由于使用修改日期而导致的某些冲突。
不同的浏览器有不同的配置行为。表 7-10 表明针对不同用户操作的不同浏览器的行为。
表 7. 当用户打开一个新的浏览器窗口时的 Last-Modified E-Tag 操作:
表 8. 当用户在原始浏览器窗口中单击 Enter 按钮时的 Last-Modified E-Tag 操作
表 9. 当用户按 F5 键刷新页面时的 Last-Modified E-Tag 操作
表 10. 没有缓存设置且用户单击 Back 或 Forward 按钮
注意:所有浏览器都假定使用默认设置运行。
不进行任何缓存相关设置
如果您不定义任何缓存相关设置,则不同的浏览器有不同的行为。有时,同一个浏览器在相同的情形下每次运行时的行为都是不同的。情况可能很复杂。另外,有些不该缓存的内容如果被缓存,将会导致安全问题。 不同的浏览器有不同的行为。表 11 展示了不同的浏览器行为。
表 11. 没有缓存设置且用户打开一个新的浏览器窗口
关键结论
HTTP1.1/HEADER说明
利用 HTTP Cache来优化网站
缓存控制头 Cache-Control
Cache-Control 是最重要的规则。这个字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令。这些指令指定用于阻止缓存对请求或响应造成不利干扰的行为。这些指令 通常覆盖默认缓存算法。缓存指令是单向的,即请求中存在一个指令并不意味着响应中将存在同一个指令。
cache-control 定义是:Cache-Control = “Cache-Control” “:” cache-directive。
表 1 展示了适用的值。
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.5 | IE 8 | Chrome 3 | Safari 4 | |
内容没有失效 | 浏览器呈现来自缓存的页面 | 浏览器重新发送请求到服务器。返回代码是 200 | 浏览器呈现来自缓存的页面 | 浏览器呈现来自缓存的页面 |
内容失效 | 浏览器重新发送请求到服务器。返回代码是 200 | 浏览器重新发送请求到服务器。返回代码是 200 | 浏览器重新发送请求到服务器。返回代码是 200 | 浏览器重新发送请求到服务器。返回代码是 200 |
表 4. 当用户在原始浏览器窗口中单击 Enter 按钮时的失效操作
Firefox 3.5 | IE 8 | Chrome 3 | Safari 4 | |
内容没有失效 | 浏览器呈现来自缓存的页面 | 浏览器呈现来自缓存的页面 | 浏览器重新发送请求到服务器。返回代码是 304 | 浏览器重新发送请求到服务器。返回代码是 304 |
内容失效 | 浏览器重新发送请求到服务器。返回代码是 200 | 浏览器呈现来自缓存的页面 | 浏览器重新发送请求到服务器。返回代码是 200 | 浏览器重新发送请求到服务器。返回代码是 200 |
表 5. 当用户按 F5 键刷新页面时的失效操作
Firefox 3.5 | IE 8 | Chrome 3 | Safari 4 | |
内容没有失效 | 浏览器重新发送请求到服务器。返回代码是 304 | 浏览器重新发送请求到服务器。返回代码是 304 | 浏览器重新发送请求到服务器。返回代码是 304 | 浏览器重新发送请求到服务器。返回代码是 304 |
内容失效 | 浏览器重新发送请求到服务器。返回代码是 200 | 浏览器重新发送请求到服务器。返回代码是 200 | 浏览器重新发送请求到服务器。返回代码是 200 | 浏览器重新发送请求到服务器。返回代码是 200 |
表 6. 当用户单击 Back 或 Forward 按钮时的失效操作
Firefox 3.5 | IE 8 | Chrome 3 | Safari 4 | |
内容没有失效 | 浏览器呈现来自缓存的页面 | 浏览器呈现来自缓存的页面 | 浏览器呈现来自缓存的页面 | 浏览器呈现来自缓存的页面 |
内容失效 | 浏览器呈现来自缓存的页面 | 浏览器呈现来自缓存的页面 | 浏览器呈现来自缓存的页面 | 浏览器重新发送请求到服务器。返回代码是 200 |
注意:所有浏览器都假定为使用默认设置运行。
控制文件是否有修改 Last-Modified/E-Tag
Last-Modified 实体头部字段值通常用作一个缓存验证器。简单来说,如果实体值在 Last-Modified 值之后没有被更改,则认为该缓存条目有效。ETag 响应头部字段值是一个实体标记,它提供一个 “不透明” 的缓存验证器。这可能在以下几种情况下提供更可靠的验证:不方便存储修改日期;HTTP 日期值的 one-second 解决方案不够用;或者原始服务器希望避免由于使用修改日期而导致的某些冲突。
不同的浏览器有不同的配置行为。表 7-10 表明针对不同用户操作的不同浏览器的行为。
表 7. 当用户打开一个新的浏览器窗口时的 Last-Modified E-Tag 操作:
Firefox 3.5 | IE 8 | Chrome 3 | Safari 4 | |
内容自上次访问以来没有被修改 | 浏览器重新发送请求到服务器。返回代码是 304 | 浏览器重新发送请求到服务器。返回代码是 200 | 浏览器重新发送请求到服务器。返回代码是 304 | 浏览器重新发送请求到服务器。返回代码是 304 |
内容自上次访问以来已经被修改 | 浏览器重新发送请求到服务器。返回代码是 200 | 浏览器重新发送请求到服务器。返回代码是 200 | 浏览器重新发送请求到服务器。返回代码是 200 | 浏览器重新发送请求到服务器。返回代码是 200 |
表 8. 当用户在原始浏览器窗口中单击 Enter 按钮时的 Last-Modified E-Tag 操作
Firefox 3.5 | IE 8 | Chrome 3 | Safari 4 | |
内容自上次访问以来没有被修改 | 浏览器呈现来自缓存的页面 | 浏览器呈现来自缓存的页面 | 浏览器重新发送请求到服务器。返回代码是 304 | 浏览器重新发送请求到服务器。返回代码是 304 |
内容自上次访问以来已经被修改 | 浏览器重新发送请求到服务器。返回代码是 200 | 浏览器呈现来自缓存的页面 | 浏览器重新发送请求到服务器。返回代码是 200 | 浏览器重新发送请求到服务器。返回代码是 200 |
表 9. 当用户按 F5 键刷新页面时的 Last-Modified E-Tag 操作
Firefox 3.5 | IE 8 | Chrome 3 | Safari 4 | |
内容自上次访问以来没有被修改 | 浏览器重新发送请求到服务器。返回代码是 304 | 浏览器重新发送请求到服务器。返回代码是 304 | 浏览器重新发送请求到服务器。返回代码是 304 | 浏览器重新发送请求到服务器。返回代码是 304 |
内容自上次访问以来已经被修改 | 浏览器重新发送请求到服务器。返回代码是 200 | 浏览器重新发送请求到服务器。返回代码是 200 | 浏览器重新发送请求到服务器。返回代码是 200 | 浏览器重新发送请求到服务器。返回代码是 200 |
表 10. 没有缓存设置且用户单击 Back 或 Forward 按钮
Firefox 3.5 | IE 8 | Chrome 3 | Safari 4 | |
内容自上次访问以来没有被修改 | 浏览器呈现来自缓存的页面 | 浏览器呈现来自缓存的页面 | 浏览器呈现来自缓存的页面 | 浏览器呈现来自缓存的页面 |
内容自上次访问以来已经被修改 | 浏览器呈现来自缓存的页面 | 浏览器呈现来自缓存的页面 | 浏览器呈现来自缓存的页面 | 浏览器重新发送请求到服务器。返回代码是 200 |
注意:所有浏览器都假定使用默认设置运行。
不进行任何缓存相关设置
如果您不定义任何缓存相关设置,则不同的浏览器有不同的行为。有时,同一个浏览器在相同的情形下每次运行时的行为都是不同的。情况可能很复杂。另外,有些不该缓存的内容如果被缓存,将会导致安全问题。 不同的浏览器有不同的行为。表 11 展示了不同的浏览器行为。
表 11. 没有缓存设置且用户打开一个新的浏览器窗口
Firefox 3.5 | IE 8 | Chrome 3 | Safari 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,则每次都重复访问. |
按刷新按扭 | 无论为何值,都会重复访问. |
发表评论
-
webpack4 - 安装
2019-04-15 17:50 0webpack4 安装 -
项目中使用webpack5
2017-11-26 16:40 1637近期react及vueJs的普及,ES6也有相应的推广及普及, ... -
PIXI 完整示例-PIXI文档翻译(7)
2017-02-27 10:04 1024案例研究:寻宝者 所 ... -
PIXI 碰撞检测-PIXI文档翻译(6)
2017-02-27 09:59 1905你现在知道如何制作各种各样的图形对象,但你能用他们做什么?一个 ... -
PIXI 基本图形-PIXI文档翻译(6)
2017-02-26 18:06 31771、基本图形 使用图像纹理是制作精灵的最有用的方法之一,但Pi ... -
PIXI 分组 Sprite-PIXI文档翻译(5)
2017-02-26 11:55 15211、分组sprite 组可以创建游戏场景,并将类似的精灵一起管 ... -
PIXI 移动 Sprite-PIXI文档翻译(4)
2017-02-26 11:38 1445你现在知道如何显示精灵,但是你怎么让他们移动?这很容易:使用创 ... -
PIXI 创建 Sprite的几种方法-PIXI文档翻译(3)
2017-02-26 11:25 58631、通过spritesheets图创建sprite 你现在知 ... -
PIXI Sprite的定位,尺寸和旋转-PIXI文档翻译(2)
2017-02-26 00:14 61621、定位Sprite 现在你知道如何创建和显示精灵,让我们了解 ... -
PIXI入门-PIXI文档翻译(1)
2017-02-25 09:47 36571、创建渲染器和舞台 ... -
如何快速的开放一个小游戏
2016-11-02 20:50 01、找一个可用的框架 2、通读一下文档和源码 3、搞一个小创意 ... -
生产环境页面性能监控
2013-04-18 00:46 1930嵌入式的开发 在代码片断中嵌入各个时间点,最后统一上报。 一 ... -
XSS攻击原理解析
2013-04-16 23:49 2719XSS全称Cross Site Script,跨站脚本攻击 它 ... -
CRSF攻击原理解析
2013-04-16 23:02 8036CRSF全称 Cross Site Request Forge ... -
页面性能优化
2013-03-27 21:56 1874压缩JS,CSS,图片 合并 ... -
JavaScript异常监控
2013-03-27 21:50 2263JavaScript异常一般可通过try ca ... -
HTML5 geolocation 规范翻译
2013-04-22 13:32 1952摘要 规范定义了脚本方式访问主机地理位置信息的API。 安全 ... -
JS文档构建(jsdoc)
2012-06-07 02:08 1711一、命令分类 类定义 @class 类型定义 @ve ... -
HTML5 Forms
2012-06-03 22:16 1283表单元素类型 常用:tel, email, date, url ... -
HTML5 WebSocket
2012-06-02 11:12 25441.WebSocket的优缺点 大 ...
相关推荐
### 浏览器HTTP缓存机制详解 #### 一、概述 HTTP缓存机制是现代Web应用中的一个重要组成部分,它能够显著提升用户体验并减轻服务器负载。本文将详细探讨浏览器HTTP缓存的工作原理及其背后的机制。 #### 二、HTTP...
对于使用Prototype.js或其他JavaScript库进行Ajax开发的开发者而言,了解并掌握如何规避浏览器缓存机制至关重要。通过在请求URL中添加随机参数或改变请求方式为POST,可以有效解决因缓存而导致的重复请求失效问题,...
Web浏览器的缓存机制是网络性能优化的重要组成部分,它能够显著提高网页加载速度,减少服务器压力,提升用户体验。本文将深入解析浏览器缓存的工作原理、类型、以及如何控制和利用缓存来优化网站性能。 一、浏览器...
### jsp去除浏览器缓存详解 #### 一、引言 在Web开发中,为了提高用户体验及页面加载速度,浏览器通常会缓存一部分资源。但有时为了确保用户获取到最新的内容,我们需要禁止或控制浏览器对特定页面的缓存。本文将...
通过对浏览器缓存机制的深入理解,我们可以看到它不仅提升了用户体验,还极大地减轻了服务器的压力。在实际应用中,开发者可以通过合理设置缓存相关的HTTP头字段来优化网站性能,比如使用`Cache-Control`来指定更...
在使用jQuery进行AJAX调用时,浏览器缓存机制可能会对应用的性能和用户交互产生影响。本文将深入探讨在*** MVC中使用jQuery时如何处理浏览器缓存问题。 首先,需要了解浏览器缓存的概念和基本原理。浏览器缓存是...
这种方式可以减轻服务器负担,但如果用户频繁清除浏览器缓存,可能会影响缓存效果。 - **JCS (Java Caching System)**:是一种服务端缓存解决方案,将数据存储在服务器的内存或硬盘中,用户可以直接从服务器获取...
缓存可以分为三种类型:客户端浏览器缓存、服务器端转发代理缓存和服务器端反向代理缓存。 在设计缓存时,需要考虑两个参数:freshness 和 validation。freshness 用于确定某个对象是否可以从缓存中获得,而 ...
2. **基于AJAX技术的浏览器缓存**:利用客户端浏览器的缓存机制,减少数据传输量,提高Web应用的响应速度。 通过以上介绍可以看出,缓存技术在Web开发和移动开发中扮演着极其重要的角色,合理地设计和使用缓存可以...
7. **数据存储**:包括cookies、缓存等存储机制。 #### 三、渲染引擎详解 不同的浏览器使用不同的渲染引擎。本文将重点介绍Gecko和WebKit两个流行的渲染引擎。 1. **WebKit渲染引擎** - **主流程**:WebKit使用...
### PHP 缓存机制详解 #### 一、引言 在现代Web开发中,缓存技术扮演着极其重要的角色。合理的缓存策略不仅能显著提升应用性能,还能改善用户体验。对于PHP开发者而言,深入理解PHP缓存机制对于构建高效稳定的Web...
客户端浏览器缓存能够直接响应重复的请求,避免重复下载;服务器端的缓存则可以减少对源服务器的直接请求,减轻网络流量。 缓存的有效性由两个主要参数控制:新鲜度(freshness)和验证(validation)。新鲜度通过...
当用户访问一个看似无害的URL时,该Web应用所使用的缓存机制就会将用户访问的具体页面以及用户的私人信息存储在缓存中。然后,攻击者可以使用这些信息来实施攻击。 Web缓存欺骗攻击的背景是为了减少Web服务器的延迟...
2. **系统架构中的速度差异**:在基于Web的应用架构中,常见的速度差异包括读取文件系统、数据库内存、应用内存、静态文件以及浏览器缓存等。缓存技术旨在减少这些环节的延迟,提高用户体验。 **缓存类型** 1. **...
这段代码首先创建了一个`WScript.Shell`对象,然后通过该对象的`RegRead`方法读取注册表中关于浏览器缓存临时目录的信息,并弹出显示路径。 ##### 2. 创建临时文件 另一种方法是通过创建一个临时文件来间接获取...
**Nginx与浏览器缓存处理方法详解** 在构建高性能的Web应用时,有效地利用缓存机制能够显著提升用户体验和服务器性能。本文将探讨Nginx服务器如何与浏览器协同处理缓存,以及如何通过Nginx配置实现更精确的缓存控制...
教程通常会涵盖如何清理浏览器缓存、管理扩展插件、调整浏览器设置等内容,旨在帮助用户最大化360浏览器的性能。 总结,360浏览器凭借其出色的安全性和易用性,在众多浏览器中脱颖而出。通过了解其特点、功能并进行...