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

在前端编程中，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的页面缓存完全是两个不同的概念，一个缓存在客户端，一个缓存在服务器端，上面的方法只是告诉浏览器，文件不需要缓存，与服务器端的页面缓存完全不相关。

前端编程中，如何消除浏览器缓存相关推荐

什么是前端编程中的骨，肉，魂
这次和大家一起来聊一聊css3,在前端编程中,html,css,js分别被称之为前端编程中的骨,肉,魂. html搭建前端页面的结构,就像是人的骨骼一般,支撑整个页面. css控制前端页面显示的效果和 ...
前端必须要懂的浏览器缓存机制
前端必须要懂的浏览器缓存机制 2017-10-11 腾讯NEXT学位腾讯NEXT学位腾讯NEXT学位微信号 NextDegree 功能介绍腾讯NEXT学位官方账号本文详细讲解了浏览器端缓存的 ...
前端对所有文件请求添加header_【前端面试必问】浏览器缓存原理？送你满分答案...
(本文适合所1-3年的前端阅读) 原文链接: http://blog.poetries.top/2019/01/02/browser-cache/ 一.浏览器缓存基本认识分为强缓存和协商缓存浏览器 ...
java 清理页面缓存数据_Web项目中，清理浏览器缓存的几种方式
在B/S架构的项目中,访问web项目时,往往需要清理浏览器的缓存数据,js ,css 等等. //方法1:在引用的js ,css ,图片,等文件的url 处加一个变量,生成一个随机数字 //方法2:在 ...
前端页面更新，解决浏览器缓存不更新问题
问题在写静态网站的时候,经常回面临某些页面上传更新后,查看时会出现没有更新的清空,就是因为浏览器读取了缓存造成的,需要清空缓存刷新才可以看到页面的更新,但是有些用户不知道这些操作.就很头痛浏览器缓 ...
在前端中清除IE浏览器缓存问题
在IE浏览器访问时,明明自己已经修改,但是前端页面显示不是自己想要的结果,通过打开F12,才能回到自己想要的结果,这是IE浏览器的缓冲问题... 以下是通过网上查找和问同事所得到的解决方案 1.在He ...
前端开发中常见的浏览器兼容性问题及解决方案
文章目录前言一.浏览器四大内核二.主流兼容问题 (一)浏览器引擎 (二)兼容问题的原因 (三) 为什么浏览器会存在兼容性问题? (四)处理兼容问题的思路 1. 要不要做? 2. 做到什么程度? ...
Win7中修改Chrome浏览器缓存文件目录
方法有两种: 第一种: 在Windows 7下可以用mklink命令把Chrome浏览器的缓存位置设置为自己需要的文件夹路径. Chrome浏览器默认的缓存文件位于: CC:\Users\登录用户名\ ...
前端编程中利用PS切图还原设计图
一. PS 切图 1.1. 常见的图片格式序号格式特点和常用的用途 1 jpg JPEG(.JPG)对色彩的信息保留较好,高清,颜色较多,我们**产品类的图片** 经常用jp ...

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

前端编程中，如何消除浏览器缓存相关推荐

最新文章

热门文章