网站的浏览器缓存设置
来源:互联网 发布:线性变换旋转矩阵 编辑:程序博客网 时间:2024/06/08 06:35
每次访问网页,通常浏览器会从服务器下载所 需的资源,例如 HTML 文档、图片、CSS、JavaScript,甚至包括字体文件等。这里面的许多文件(例如图片)都是很少变动的,如果每次都要从服务器重新下载,会不必要 地增加网页载入时间,同时也会对服务器造成一定压力。通过合理配置缓存策略,可令浏览器以某种方式把这些静态的文件缓存起来,下次请求同一资源时,直接使 用本地存储的副本,而不是从服务器重新下载。
浏览器是否使用缓存、缓存多久,是由服务器控制的。准确来说,当浏览器请求一个网页(或者其他资源)时,服务器发回的响应的「响应头」部分的某些字段指明了有关缓存的关键信息。
Cache-Control
Cache-Control
HTTP 响应头是 HTTP 1.1 协议新增的指令,每个资源都可以通过设定 Cache-Control 来建立缓存策略。通常,可为它指定一个max-age
,表示缓存的最长时间,单位为秒。例如,若设定Cache-Control: max-age=604800
,则表示这个资源的有效时间为 7 天。浏览器第一次获取这个资源后,7 天之内若再次请求,通常都不会与服务器进行任何通信,而是直接使用本地副本。
Expires
同样是用来控制缓存,Expires
响 应头从另一个角度——指明缓存的具体过期日期,来控制资源何时过期。在过期时间以内,若再次发起请求,通常浏览器都不会与服务器进行任何通信,而是直接使 用本地副本。Apache 服务器允许以多种方式,例如基于该资源的访问时间或上次修改时间来设定 Expires 的值。注意,这里的时间一律使用格林威治时间(Greenwich Mean Time, GMT),而非本地时间。
当 Expires 和 Cache-Control 同时出现时,通常后者会覆盖前者的设定。由于 Expires 对用户的系统时间有所依赖,因此通常认为使用 Cache-Control 是更好的选择(基本上所有的浏览器都支持 Cache-Control 指令)。
Last-Modified 和 ETag
服务器可在 HTTP 返回头中包含Last-Modified
字段或者ETag
字段。Last-Modified 表示被请求资源在服务器端的上次修改时间,而 ETag 则是一个唯一文件标识符,每次文件修改后都会生成一个新的 ETag。服务器通过向浏览器发送这两个字段,来告知浏览器其获得的资源的版本。
无论通过 Cache-Control 还是 Expires 设置缓存,在过期时间以内,当用户点击浏览器刷新按钮时,为了确保用户所加载的资源是最新的,大部分浏览器不会再直接使用缓存中的数据,而是发出一个条件请求(Conditional GET Request)。对于这类请求,浏览器会在请求头中包含If-Modified-Since
或If-None-Match
字 段。前者即浏览器当初得到的 Last-Modified;后者即浏览器当初得到的 ETag。当服务器发现资源的更新时间晚于 If-Modified-Since 所提供的时间,或者资源在服务器端当前的 ETag 和 If-None-Match 提供的不符时,会响应整个资源,否则只会响应一个 304 Not Modified 状态码(因此浏览器将不需要重新下载整个资源)。这种机制可以最大程度上减少数据下载量。此外,如果缓存的资源已过期,浏览器通常有两种选择:重新下载这 个资源,或发出一个条件请求。很多浏览器都会采取后者,以节约资源。
由于 Last-Modified 和 ETag 的作用是相同的(均为向服务器验证资源是否最新),因此只使用一个即可。通常认为 Last-Modified 更好(它和 Expires 不同,由服务器生成,不依赖浏览器端时间)。
用浏览器的开发者工具或插件查看,启用缓存的资源的例子
使用缓存的策略
为静态资源设置长缓存时间
有些资源是很长时间不会改变的,比如网站的 logo 图片、jQuery 库、字体等,因此可以为它们设定「永不过期」的缓存时间,例如设定为 10 年。
确保文件修改生效
有 些时候我们会修改一些资源,比如更新了 jQuery 版本,或网站的 CSS 样式。如果这些资源已经被缓存,那么除非用户手工刷新页面,否则要等缓存自然过期之后用户才会获得新版本。如何在这种情况下强制浏览器重新下载呢?最有效 的一个办法就是在这类资源的文件名中包含版本信息,并在更改之后对应地修改文件名。浏览器发现文件更换后,自然无法使用缓存,而会重新下载。
对于 HTML 文档谨慎设定过期时间
大 部分情况下,对于其他图片、CSS、JavaScript 等资源的请求都来自一个单一的 HTML 文档。对于这类页面通常应该设定比较短的过期时间,或者干脆不设定。因为如果这类页面被缓存,那么页面中包含的资源的文件名等等信息都会一并被缓存,导致 对它的更新难以确保立即对用户生效。
设定缓存的方法
对于 Apache 服务器,可以通过 mod_expires 模块来设定Expires
HTTP 头或Cache-Control
HTTP 头的max-age
指令。编辑相应目录下的 .htaccess
文件,或直接对 Apache 的配置文件(根据服务器系统版本不同,可能为httpd.conf
或apache2.conf
等)作出修改。
分文件类别设定
使用ExpiresByType
可以按照文件的 MIME Type 设定某一类文件的过期日期。例如:
- <IfModule mod_expires.c>
- ExpiresActive On
- ExpiresByType text/css "access plus 1 week"
- ExpiresByType application/javascript "access plus 2 weeks"
- ExpiresByType image/x-icon "access plus 6 months"
- ExpiresByType image/gif "access plus 6 months"
- ExpiresByType image/png "access plus 6 months"
- ExpiresByType image/jpeg "access plus 6 months"
- ExpiresByType video/x-flv "access plus 6 months"
- ExpiresByType application/pdf "access plus 6 months"
- </IfModule>
其中access plus 1 week
表示将缓存过期设置为访问时间(即当前时间)之后的一周。如果将access
替换为modification
,则缓存过期会被设定为文件修改时间之后的一周。
不同的时间也可以进行组合,例如:
- ExpiresByType text/html "access plus 1 month 15 days 2 hours"
- ExpiresByType image/gif "modification plus 5 hours 3 minutes"
根据文件扩展名进行设置
如果希望根据扩展名来指定缓存规则,可以使用FilesMatch
配合正则表达式。为了简洁,我这里只规定了ExpiresDefault
。它的优先级很低,只会在对应文件没有任何其他规则能够匹配(包括上层目录下的缓存规则)时生效。
- <IfModule mod_expires.c>
- <FilesMatch "\.(css|js)$">
- ExpiresActive on
- ExpiresDefault "access plus 1 week"
- </FilesMatch>
- </IfModule>
对某些文件设定
同理,也可以对某些文件启用特定的缓存策略。注意,文件名中的点(.
)是需要转义的。
- <IfModule mod_expires.c>
- <FilesMatch "^(example\.css|example\.js)$">
- ExpiresActive on
- ExpiresDefault "access plus 1 week"
- </FilesMatch>
- </IfModule>
- 网站的浏览器缓存设置
- 大型网站的浏览器缓存设置
- 浏览器禁用缓存的设置
- 网站设置缓存的问题
- 浏览器页面的缓存设置(不缓存设置)
- Filter的浏览器端缓存设置
- 设置浏览器缓存的几种方法
- Nginx的浏览器本地缓存设置
- google浏览器设置不缓存的方法
- 设置浏览器缓存
- 浏览器缓存设置
- 设置浏览器禁止缓存
- nginx---浏览器设置缓存
- 浏览器缓存常用设置
- Nginx浏览器缓存设置
- nginx的缓存设置 expires缓存提升网站负载
- 网站中浏览器缓存的控制(IIS+ASP.Net)
- 设置浏览器不缓存页面
- 深入理解DOM事件类型系列第八篇——变动事件
- 调试rviz,并解决问题“For frame [laser]: Fixed Frame [map] does not exist”
- Masonry使用[草稿]
- 超华丽的HTML5 Canvas文字动画特效
- Web_parser
- 网站的浏览器缓存设置
- HBase的RowKey设计原则
- java性能监控工具MoSKito学习--一步一步开始工作1,2
- 入门springboot报错org.apache.coyote.http11.AbstractHttp11Protocol.setCompressableMimeTypes
- Dijkstra算法1.0
- Annotation processors must be explicitly declared now
- bzoj2716 [Violet 3]天使玩偶(CDQ分治)
- Redis实现分布式session功能的共享
- 不同软件中的字符串操作