【踩坑记录】一个新手几乎都踩过的坑...

话不多说，这个坑就是：浏览器缓存。
前段时间在一个平台上线前的一个晚上，在做最后的业务检查时发现进入游戏页面时一个白屏bug，看了以后是js控制的页面高度变为0所以没显示正常。。。

吓得我赶紧改了一番，按照流程在上线前是要走QA的，然而这时候测试妹纸已经累的不行先回去了（这几天累的有点病）。于是没回去的几个人自己测一通，咦没什么问题，好走你!上线!
于是过了一天平台正式对外时公司有人测出还是白屏。。。
又检查了一遍代码，做了些修改后走测试后上线了。我让运维同志帮忙刷cdn，不过有些人还是不正常显示，话说这个游戏页面是前后端混合开发的，我准备在php页面改js时间戳时被组长制止，说让后端改。于是后端改了时间戳后大家都说正常了。

说完了故事来总结一下吧:
1.可以在页面头部让浏览器别缓存本页面资源，每次打开都是直接访问服务器获取，（不过是只有部分浏览器支持，然而也很少人这么做，所以大家知道下就好）：

1
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

2.通俗的讲，平时工作中说的加时间戳不一样是加一个一大段代表某个时候的数字，而是加一个区别于修改前的版本就好，因为加了以后浏览器会把他当一个新文件对待而不去拉取缓存，例如原来是：

1
<script src="a.js"></script>

修改后你可以这样加：

1
2
3
4
<!-- 方式一 -->
<script src="a.js?v=1.0"></script>
<!-- 方式二 -->
<script src="a.js?t=20160423"></script>

当然并不局限于js，css/媒体资源都可以或者都需要这么做。

3.浏览器缓存是web缓存中的一员，关于他的详细介绍我这菜鸡还是不说了，找了一篇文章。摘抄一段：

哪些请求不能被浏览器缓存？

  • HTTP信息头中包含Cache-Control:no-cache，pragma:no-cache，或Cache-Control:max-age=0等告诉浏览器不用缓存的请求
  • 需要根据Cookie，认证信息等决定输入内容的动态请求是不能被缓存的
  • 经过HTTPS安全加密的请求（有人也经过测试发现，ie其实在头部加入Cache-Control：max-age信息，firefox在头部加入Cache-Control:Public之后，能够对HTTPS的资源进行缓存，参考《HTTPS的七个误解》）
  • POST请求无法被缓存
  • HTTP响应头中不包含Last-Modified/Etag，也不包含Cache-Control/Expires的请求无法被缓存

欢迎大家转载，请注明出处：
Doterlin's Blog https://doterlin.github.io/blog/2016/04/23/http_cache/

">