在网络上,有一些缓存服务器,另外浏览器自身也有缓存功能。
例如:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><img src="./a.jpg" alt="">
</body>
</html>
第 1 次访问该页面时,正常下载图片,返回值是 200:
响应头的抓包分析:
基于一个前提——图片不会经常改动,服务器在返回 200 的同时,还返回该图片的特征值(签名 ETag),当浏览器再次访问该图片时,就回去服务器椒盐 ETag,如果图片没有变化,则直接使用缓存中的图片,减轻了服务器的负担:
响应头的抓包分析:
自(If-Modified-Since 的)时间点后图片修改过,则重新请求;如果图片最新的签名(ETag)和上次返回(If-None-Match)的值不匹配,则重新请求。此时响应值是 304,浏览器从本地取缓存,节省了图片在网络上传输的时间。
请求头的 If-None-Match 和 响应头的 Etag 对应,请求头的 If-Modified-Since 和 响应头的 Last-Modified 对应。
HTTP Cache-Controll 请求头信息
在大型网站中,如何处理主服务器和缓存服务器之间的问题:要不要缓存和缓存多久,需要用到 HTTP Cache-Controll 请求头信息
步骤:
① 主服务器需要开启 mod_expires 模块(Apache 服务器)
利用该扩展来控制图片、css、html 等文件是否缓存以及缓存的生命周期,
② 在当前目录下新建 .htaccess 文件
语法:
ExpiresDefault "<base> [plus] {<num> <type>}*"
ExpiresByType type/encoding "<base> [plus] {<num> <type>}*"
后面 4 个参数分别表示
base:基于哪个时间点来计算缓存有效期,有两个值:access/now,now 等价于 access,表示基于请求响应的那一瞬间;另一个值是 modification,表示被请求文件的最后修改日期,比如被修改后的一周内仍然有效
plus:可选参数
num:缓存时间的大小(30)
type:缓存时间的单位(天)
【例】
给 jpg 图片设置 1 个月的生存周期
.htaccess:
ExpiresActive On
ExpiresByType image/jpeg "access plus 1 month"
执行页面,抓包分析:
如果在集群环境中,缓存服务器得到此图片,将会认为在一个月内有效,减轻了主服务器的负担。
设置服务器不让用缓存
比如有些个人信息不允许缓存服务器缓存,必须到主服务器请求。
可以利用 apache 服务器的 mod_headers 模块
在 .htaccess 中追加信息
.htaccess:
ExpiresActive On
ExpiresByType image/jpeg "access plus 1 month"<FileMatch "\.(gif|png)$">
header set Cache-Controll "no-store,must-revalidate"
<FileMatch>
使用正则表达式,设置当图片是 gif 或 png 格式的图片时,不允许缓存。
修改 cache-01.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><img src="./a.jpg" alt=""><img src="./php.gif" alt="">
</body>
</html>
执行文件,抓包分析:
多次刷新页面,php.gif 的响应值都是 200。
新浪微博(不允许缓存)的抓包图: