前端更新需要清空浏览器缓存_浏览器缓存机制分析及前端缓存清理

浏览器缓存机制分析及前端缓存清理

发布时间：2018-06-03 16:56,

浏览次数：857

本文主题：理清浏览器的缓存机制的内部逻辑，并给出避免浏览器缓存的相关解决方案

相信很多新手前端发布页面的时候都会遇到一个问题，就是明明页面已经更新了，但是浏览器浏览页面并没有变化，那么如何解决这个问题呢？

事实上，这个问题各种搜索引擎搜索之后会发现有很多的方案，但不一定有效，一般的解决方案有以下的两种：1：添加时间戳；2：cache-control。

首先第一种，就是在你的所有静态资源文件后面添加随机时间戳，例如你的页面里面用到了test.js，那你修改过test.js在html页面中的引用就要改成像下面这个样子

每次修改test.js之后修改version后面的时间戳，这样浏览器就会忽略缓存从服务器请求新的文件，但是，真正这么做了之后，还是会发现，即使所有修改过的文件在应用的时候都添加了时间戳了，但是页面缓存还是没有清除，这又是为什么呢？原因很简单，你只对你修改过的文件添加了时间戳，但是html页面本身在这个时候已经被修改了，html页面是所有静态资源的载体，如果不对它加上时间戳，所有的其他应用都会沿用旧的缓存，所以，这个时候要让缓存失效，只需要在你的访问的网址上面再添加一个时间戳，例如：http://www.test.com/index.html?version=123456。

但很明显，这种做法其实很不优雅࿰