关于清空缓存（待）

经常会被浏览器缓存搞得各种懵逼~ 今天就整理下几种方案。

css、js添加随机数

最简单的方式当然是给js和css后面添加版本号，这个版本号可以是一个时间戳，如下：

<link href="/css/home/index.css?v=20161216" rel="stylesheet" type="text/css">
<script src="/js/common/index.js?v=20161216"></script>

这个可以解决问题，但是每次发布项目，所有的js和css都必须手动的修改一下这个时间戳，如果文件特别多，那么就很麻烦。此外有可能着急上线，然后就有些文件忘记修改了版本号。解决方法如下：

php输出时间戳
如果后台使用的是php语言，可以让php输出时间戳

<link href="/css/home/index.css?v=<?php echo time();?>" rel="stylesheet" type="text/css">
<script src="/js/common/index.js?v=<?php echo time();?>"></script>

这样每次刷新页面，都会新产生一个时间戳，保证了每次请求的js和css都是最新的。

js动态创建脚本和样式

使用gulp构建工具

使用webpack构建工具

浏览器中的缓存

这个一般比较好处理，清空掉浏览器的缓存，我一般开发用谷歌，找到谷歌的清除浏览器缓存，清空掉即可。

这样做也会有个问题，会将浏览器中的cookie、表单也一并清空。可以有两个解决方法

• 1. 只清空掉缓存的图片和文件。在谷歌下清空缓存时，可以选择只清空缓存和图片，如下图。

Paste_Image.png

• 2. 清空浏览器缓存并硬性加载。谷歌下单机长按刷新按钮，会弹出清空缓存并硬性加载，如下图。

Paste_Image.png

移动端app缓存

这个缓存的原理是将h5页面的所有资源都缓存在客户端，例如js、css、图片。如果更新了服务器中的静态资源文件，客户端是不会走请求的。因为客户端首先会走本地缓存文件，如果本地没有缓存文件，才会走服务器请求。所以这里可以增加一层逻辑，当服务器文件修改了，客户端清空掉这个缓存文件，重新请求文件，然后再缓存在本地。这就需要后台同事的帮忙了。