admin管理员组

文章数量:815295

前端编程中,如何消除浏览器缓存

在前端编程中,Brackets与nginx是我最喜欢的组合,调试代码与接口全在本地,完全能达到那种飞一般的编程感觉。

但在开发中,最容易郁闷的是,html与js文件容易被浏览器缓存,文件都已经更新了,但感觉服务器返回的文件依然是上上上次的,非要手动清除一次浏览器的缓存,才能查看到最新的文件,这特么的也太烦了不是?

查看静态文件的请求头信息,如下:

Accept-Ranges:bytes
Content-Length:211089
Content-Type:application/javascript
Date:Tue, 29 Nov 2016 04:26:40 GMT
ETag:"583c0ad3-33891"
Last-Modified:Mon, 28 Nov 2016 10:45:39 GMT
Server:nginx/1.10.2

从Date与Last-Modified字段就可以看出,js文件被浏览器缓存了,缓存的时间还将近一天,于是就想到为js文件添加头信息,偷了一次懒,直接在根路径添加缓存头信息,如下:

location / {root   E:/Workspace/yii-es6-amd;index  index.html index.htm;add_header Cache-Control no-cache;add_header Cache-Control private;expires 0s;
}

结果,所有的静态文件依旧那么牢牢地保持缓存状态,继续添加过滤规则,如下:

#   利用正则表达式匹配静态资源目录
location ~ /dest/(.*) {root   E:/Workspace/yii-es6-amd;add_header Cache-Control no-cache;add_header Cache-Control private;expires 0s;
}

然后请求服务器,返回的头信息如下:

Accept-Ranges:bytes
Cache-Control:no-cache
Cache-Control:max-age=0
Cache-Control:private
Connection:keep-alive
Content-Length:514
Content-Type:text/html
Date:Tue, 29 Nov 2016 07:03:25 GMT
ETag:"583d283b-202"
Expires:Tue, 29 Nov 2016 07:03:25 GMT
Last-Modified:Tue, 29 Nov 2016 07:03:23 GMT

可以看出,Date与Expires字段完全相等,这下浏览器再也不缓存页面了。

需要特别指出的是,浏览器页面缓存与nginx的页面缓存完全是两个不同的概念,一个缓存在客户端,一个缓存在服务器端,上面的方法只是告诉浏览器,文件不需要缓存,与服务器端的页面缓存完全不相关。

本文标签: 前端编程中,如何消除浏览器缓存