浏览器缓存机制&处理方法

背景

开发中,经常遇到的问题:修改过css样式或者js代码,F5刷新浏览器,代码并没有生效,这是浏览器缓存造成的,浏览器设计的目的是为了节省用户流量,因为资源文件一般较稳定,数量多,但修改量少。

浏览器缓存机制

① 首次加载

② 再次加载

相关术语

  1. Etag
    HTTP协议规格说明定义ETag为“被请求变量的实体值”。另一种说法是,ETag是一个可以与Web资源关联的记号(token)。典型的Web资源可以一个Web页,但也可能是JSON或XML文档。服务器单独负责判断记号是什么及其含义,并在HTTP响应头中将其传送到客户端,以下是服务器端返回的格式:ETag:”2400-5437207ef2880”客户端的查询更新格式是这样的:If-None-Match : W / “50b1c1d4f775c61:df3”如果ETag没改变,则返回状态304然后不返回,这也和Last-Modified一样。测试Etag主要在断点下载时比较有用。
  2. Last-Modified
    在浏览器第一次请求某一个URL时,服务器端的返回状态会是200,内容是客户端请求的资源,同时有一个Last-Modified的属性标记此文件在服务器端最后被修改的时间。
    Last-Modified格式类似这样:

    Last-Modified:Thu, 19 Jul 2018 06:22:10 GMT  

    客户端第二次请求此URL时,根据HTTP协议的规定,浏览器会向服务器传送If-Modified-Since报头,询问该时间之后文件是否有被修改过:

    If-Modified-Since:Thu, 19 Jul 2018 16:25:20 GMT   

    如果服务器端的资源没有变化,则自动返回 HTTP 304(Not Changed.)状态码,内容为空,这样就节省了传输数据量。当服务器端代码发生改变或者重启服务器时,则重新发出资源,返回和第一次请求时类似。从而保证不向客户端重复发出资源,也保证当服务器有变化时,客户端能够得到最新的资源。

  3. Expires
    Expires是RFC 2616(HTTP/1.0)协议中和网页缓存相关字段。用来控制缓存的失效日期,要注意的是,HTTP/1.0有一个功能比较弱的缓存控制机制:Pragma,使用HTTP/1.0的缓存将忽略Expires和Cache-Control头。
  4. Cache-control
    Cache-Control 是最重要的规则。这个字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令。这些指令指定用于阻止缓存对请求或响应造成不利干扰的行为。这些指令通常覆盖默认缓存算法。缓存指令是单向的,即请求中存在一个指令并不意味着响应中将存在同一个指令。
    cache-control 定义是:

    Cache-Control =Cache-Control” “:” cache-directive

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

几种处理缓存的方法

① HTML页面

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="0">

② 引用资源使用随机数

URL 参数后加上 “?t=” + Math.random(); // 参数可使用随机数或版本号管理

<script>
	document.write("<s"+"cript type='text/javascript' src='./config.js?t="+Math.random()+"'></scr"+"ipt>"); 
</script>

 

③ Ajax 请求禁用缓存 ( jQuery )

$.ajaxSetup({ 
  cache: false  // 不设置 ajax 缓存
}) 

 

④ Nginx 禁用缓存

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|js|css)$ {
  #禁止缓存,每次都从服务器请求
  add_header Cache-Control no-store;
}

 

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注