一、HTTP缓存之Cache-Control

Cache-Control 是最重要的规则。这个字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令。这些指令指定用于阻止缓存对请求或响应造成不利干扰的行为。这些指令通常覆盖默认缓存算法。缓存指令是单向的,即请求中存在一个指令并不意味着响应中将存在同一个指令。

网页的缓存是由HTTP消息头中的“Cache-Control”来控制的,常见的取值有private、no-cache、max-age、must-revalidate等,默认为private。

http1.1新增了 Cache-Control 来定义缓存过期时间。

注意:若报文中同时出现了 Expires 和 Cache-Control,则以 Cache-Control 为准。

Cache-Control也是一个通用首部字段,这意味着它能分别在请求报文和响应报文中使用。在RFC中规范了 Cache-Control 的格式为:

"Cache-Control" ":" cache-directive

表 1. 常用的 cache-directive 的可选值有

Cache-directive

说明

public

所有内容都将被缓存(客户端和代理服务器都可缓存)

private

内容只缓存到私有缓存中(仅客户端可以缓存,代理服务器不可缓存)

no-cache

必须先与服务器确认返回的响应是否被更改,然后才能使用该响应来满足后续对同一个网址的请求。因此,如果存在合适的验证令牌 (ETag),no-cache 会发起往返通信来验证缓存的响应,如果资源未被更改,可以避免下载。

no-store

所有内容都不会被缓存到缓存或 Internet 临时文件中

must-revalidation/proxy-revalidation

如果缓存的内容失效,请求必须发送到服务器/代理以进行重新验证

max-age=xxx (xxx is numeric)

缓存的内容将在 xxx 秒后失效, 这个选项只在HTTP 1.1可用, 并如果和Last-Modified一起使用时, 优先级较高

表 2. 对 Cache-Control 值的浏览器响应

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 允许自由组合可选值,例如:

Cache-Control: max-age=3600, must-revalidate

它意味着该资源是从原服务器上取得的,
且其缓存(新鲜度)的有效时间为一小时,在后续一小时内,用户重新访问该资源则无须发送请求。

这种组合的方式也会有些限制,比如 no-cache 就不能和 max-age、min-fresh、max-stale 一起搭配使用。

组合的形式还能做一些浏览器行为不一致的兼容处理。例如在IE我们可以使用 no-cache 来防止点击“后退”按钮时页面资源从缓存加载,但在 Firefox 中,需要使用 no-store 才能防止历史回退时浏览器不从缓存中去读取数据,故我们在响应报头加上如下组合值即可做兼容处理:

Cache-Control: no-cache, no-store


二、清理网站缓存的几种方法

1. meta方法,在html里head区添加代码(vue项目-根目录index.html

<--如果需要在html页面上设置不缓存,这在标签中加入如下语句-->
<meta http-equiv="Pragma" content="no-cache">
<--用于设定禁止浏览器从本地机的缓存中调阅页面内容-->
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<-- Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。-->
<meta http-equiv="Expires" content="0">

2. 清理临时缓存(form表单)

<body onLoad="javascript:document.yourFormName.reset()">

 3. jquery ajax清除浏览器缓存的两种方法:

//  1)、通过$.ajaxSetup 设置属性cache:false,让ajax不调用浏览的缓存:
jQuery.ajaxSetup ({cache:false})

// 2)、在ajax的url后加上随机串来避免浏览缓存,随机数也是避免缓存的一种很不错的方法:
$.ajax({url:'test.php?'+parseInt(Math.random()*100000)})

4. js 代码清除缓存

(原理:增加了一个参数,且该参数是一个随机数,每次都不一样,所以每次的请求参数都不一样,服务器会将其作为一个新的请求,重新返回结果,而不会使用缓存)

<script src="lib/page.js?random=120211"></script>

 // css文件加一个标识 强制浏览器重新加载此文件
<link rel='stylesheet' href='css/index.css?t=120224'>   

// 图片文件:
background:url(**.png?20150421) 加一个标识号,使图片不被缓存

5. Vue项目-配置 vue.config.js(使用时间戳)

const Version = new Date().getTime()

module.exports = {
	css: {
	    loaderOptions: {
	      sass: {
	        data: `@import "@/components/themes/_handle.scss";`
	      }
	    },
	    // 是否使用css分离插件 ExtractTextPlugin
	    extract: {
	      // 修改打包后css文件名
	      filename: `static/css/[name].${Version}.css`,
	      chunkFilename: `static/css/[name].${Version}.css`
	    }
	 },
	 configureWebpack: {
		 output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】

		      filename: `static/js/[name].${Version}.js`,
		      chunkFilename: `static/js/[name].${Version}.js`
		    }
	},
	chainWebpack(config) {
		// img的文件名修改
	    config.module
	      .rule('images')
	      .use('url-loader')
	      .tap(options => {
	        options.name = `static/img/[name].${Version}.[ext]`
	        options.fallback = {
	          loader: 'file-loader',
	          options: {
	            name: `static/img/[name].${Version}.[ext]`
	          }
	        }
	        return options
	      })
	}
}

6. Vue项目 - 在package.json文件中,有个属性:version,每次打包时,改变一下内容

7. 配置 nginx 不缓存 html

vue默认配置,打包后css和js的名字后面都加了哈希值,不会有缓存问题。但是index.html在服务器端可能是有缓存的,需要在服务器配置不让缓存index.html 

server {
    listen 80;
    server_name yourdomain.com;
    location / {
        try_files $uri $uri/ /index.html;
        root /yourdir/;
        index index.html index.htm;
 
        if ($request_filename ~* .*\.(?:htm|html)$)
        {
            add_header Cache-Control "no-cache, no-store";  //对html文件设置永远不缓存
        }      
      }
}

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐