跳至主要內容

浏览器缓存

刘春龙原创...大约 2 分钟LinuxNginxWEB服务器教程文档

浏览器缓存是为了加速浏览,浏览器在用户磁盘上,对最近请求过的文档进行存储。当访问者再次请求这个页面时,浏览器就可以从本地磁盘显示文档,这样,就可以加速页面的阅览,缓存的方式节约了网络的资源,提高了网络的效率

浏览器缓存可以通过 expires 指令输出 Header 头来实现。

语法:expires[time| epoch | max |off]
默认值:expires off
作用域:http、server、location

一个 HTML 页面,会引用一些 JavaScript 文件、图片文件、而这些格式的文件很少会被修改,则可以通过 expires 设置浏览器缓存。

比如,对常见格式的图片、Flash 文件在浏览器本地缓存 30 天,对 JS、CSS 文件在浏览器本地缓存 1 小时,代码如下

http {
    location ~ .*\.(gif|jpg|png)$ {
          expires 30d;
    }
    location ~.*\.(js|css)?$ {
          expires 1h;
    }
    location / {
          root   html;
          index  index.html index.htm;
   }
}

Cache-Control

设置相对过期时间, max-age 指明以秒为单位的缓存时间. 若对静态资源只缓存一次, 可以设置 max-age 的值为 315360000000 (一万年). 比如对于提交的订单,为了防止浏览器回退重新提交,可以使用 Cache-Control 之 no-store 绝对禁止缓存,即便浏览器回退依然请求的是服务器,进而判断订单的状态给出相应的提示信息

Http 协议的 cache-control 的常见取值及其组合释义:

no-cache: 数据内容不能被缓存, 每次请求都重新访问服务器, 若有 max-age, 则缓存期间不访问服务器

no-store: 不仅不能缓存, 连暂存也不可以(即: 临时文件夹中不能暂存该资源)

private(默认): 只能在浏览器中缓存, 只有在第一次请求的时候才访问服务器, 若有- - max-age, 则缓存期间不访问服务器

public: 可以被任何缓存区缓存, 如: 浏览器、服务器、代理服务器等

max-age: 相对过期时间, 即以秒为单位的缓存时间

语法结构:

# expires 1d;
add_header Cache-Control no-cache;
add_header Cache-Control private;

下面是开发部门同事发过来的配置需求:

  • 禁用 html 文件缓存,即 cache control 设置为 no-cache;
  • 对于 js,图片,css,字体等,设置 max-age=2592000. 也就是 30 天;
server{
  listen 80;
  server_name 192.168.66.100;
  location ~ \.(css|js|gif|jpg|jpeg|png|bmp|swf|ttf|woff|otf|ttc|pfa)$ {
    root /data/web/kevin;
    expires 30d;
  }
  location ~ \.(html|htm)$ {
    root /data/web/kevin;
    add_header Cache-Control no-cache;
  }
}
上次编辑于:
贡献者: 刘春龙
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.7