如上图，在web前端项目的开发中，缓存是一个难点，这是慕课网上小米工程师刘炬光PPT上开篇的一段话，很经典，对缓存感兴趣的强烈推荐大家去看一看，链接：前端缓存那些事儿。
下面讲一讲我对缓存处理的过程。
阶段一：不处理
在开始做web前端开发时，对cache懵懵懂懂，一开始做的项目没有任何对cache的处理，既没有在.html文件<head>中添加<meta>缓存标签，也没有在引用静态资源的地方添加版本标识。直接导致的结果就是在我做的我们公司的APP下载页面down.html中，虽然服务器上down.html已经更新，安卓APP的链接已经升级到5.0.1 版本。但是因为缓存的原因，部分用户没有从服务器上获取最新页面，依然使用的是本地的cache文件，下载的也是老的5.0.0。在这个时候，我才开始重视对cache的处理。
阶段二：手动添加版本号
对于软件这个领域，快速提升自己的方法之一就是学习分析他人的代码，在这个过程中，我发现有好多人会在引用的js和css文件后面添加类似“?ver=0.01”的标识，如下图所示。
这是什么鬼？于是百度之，原来这是版本号，这样就能解决版本号的问题了，每次更新完文件，就应该在文件名后面添加或升级版本号。这样浏览器加载页面时，就会把缓存中的文件和服务器中的文件对比，举个例子，对于main.min.css这个文件，首先浏览器会向服务器发起请求，我需要“main.min.css?ver=0.02”这个文件，我本地的cache里面的资源是“main.min.css”,它是不是最新的？服务器告诉浏览器，文件名已经变更，需要重新从服务器下载这个资源。当然这只是一种形象化的描述。真实的过程跟ETag等参数有关系，有兴趣的童鞋可以查找对应的资料。
阶段三：.html文件<head>中添加<meta>缓存标签
对于阶段二，虽说已经能够基本应对缓存的问题，但是远远不够。因为在快速迭代的软件开发中，不仅js和CSS文件需要更新，.html文件同样需要更新，那么怎么办？一样的给.html文件添加版本号吗?如果有10个项目引用了同一个down.html页面，down.html页面更新，那么是不是这10个项目全部都得更新down.html的版本号，这显然不科学，而<meta>缓存标签可以解决这个问题。
在我维护的公益项目中，我在每个html文件头部中添加了：
<meta http-equiv="Cache-Control" content="no-cache">
这样，所有的.html我就不需要考虑缓存的问题了，反正只要服务器上.html文件有更新，浏览器就应该下载最新的.html文件。
阶段四：基于gulp的前端静态文件自动添加版本号
阶段二加上阶段三的方法，已经能够基本应对前端缓存的问题，但是依然谈不上方便，首先，所有的.html页面不缓存，必然会影响CHP（缓存命中率）值，对于CHP的介绍和分析，我依然推荐大家看：前端缓存那些事儿。
接下来我又开始了上下求索的过程，前端自动化工具自动添加版本号的文章和blog查了很多，讲得最清楚和我实测可用是这两篇文章：
前端自动化工具，网上推荐最多的是grunt和gulp，而gulp优于grunt，所以选择了gulp。
至于具体步骤，上面两篇文章已经讲得很详细很清楚了，我就不班门弄斧了。
最后上传我生成版本号前后的截图：
生成前：
生成后：
所以对于前端开发中的缓存处理，最优的方法是只在index.html(也就是你的主页)中添加<meta http-equiv="Cache-Control" content="no-cache">标签，其它有更新需求的所有静态文件采用gulp自动添加版本号。这样做的前端页面性能才是最好的。
2017年1月10日补充：
<meta>缓存标签支持有限，目前还是需要服务端来设置。（待补充）
6042
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
