写在前面：
网页浏览器为什么要有缓存浏览器缓存（baiBrowser Caching）？
我们都知道，在浏览器中打开一个网址时会经过：URL 解析 -> DNS 查询 -> TCP 连接 -> 处理请求 -> 接受响应 -> 渲染页面等一系步骤后，并且在不出任何(如，网速太慢，突然断网，服务器出错，代码出错等)意外的情况下，页面内容才能正常的展现在我们眼前。
而且在网页中所加载各种资源，都要建立HTTP连接，客户端(浏览器) 和 服务器要经过三次握手，四次挥手，再经过DOM树渲染等过程，其实挺不容易的(尤其是在以前的网络环境和软硬件技术都还不太好的时候，不过现在各方面都好多了！)，所以为了可以提高页面的呈现速度，就有了这个浏览器缓存。
浏览器缓存带来的好处：
我们在第一次浏览网页时，默认情况下浏览器会自动缓存所加载的系列资源，当我们再次打开访问之前的这个网页时，会先查看缓存是否有本次请需要请求的资源，如果有就直接从缓存读取(如果没有就请求服务器)，这样就便于我们在访问页面时：减少请求时间、节省网络流量，提高响应速度，我们带来更好的用户体验。
浏览器缓存带来的弊端：
缓存作为用户来讲确实有利，但是做为开发者来说，尤其是作前端开发的都知道，每当项目有新需求、版本更新迭代后，如果之前用户已经有的缓存时，所看到的页面还是之前浏览过的缓存效果，看不到更新后的效果，这种情况 尤其是在微信内置的浏览器中，更为严重（之前着急的时候，还让客服暂时教用户清除微信缓存来解决这个问题）。
如何清除微信浏览器的缓存：
由于微信浏览器在移动端 Android环境 和 IOS环境 中浏览器内核不一样；所以不同版本的微信 和 不同的系统 之间清理缓存的方式也就略有不同。
在IOS环境下手动清除微信缓存：
大至有以下几种清除方式（Android环境也适用）
- 先退出当前微信账号登陆，然后重新登录微信；
- 如果是微信公众号企业号等 先取关注，然后再重新关注。
- 进入页面后，右上角的 “…” 按扭，在屏幕下面弹出的选项中点击 “刷新“。
- 在微信底部导航菜单点击”我” -> 设置 -> 通用 -> 存储 -> 清理缓存 或 清理。
在Android环境下手动清除微信缓存：
在微信中打开 腾讯浏览器开发者服务提供的 X5内核调试专用页 网址：https://debugx5..com，在微信浏览器中打开后，勾选要清除的选项，点击清除按扭即可！如下图所示：
注： 有的手机打开debugx5..com可能会提示，”你使用的内核非X5内核，请前往。。。！”
出现以上情况后，请先微信浏览器中打开 http://debugmm..com/?forcex5=true 这个网址 后，再打开 debugx5..com ！就能打开啦！
除了上面的清除缓存方法以外，在Android环境中还有一种可以达到清除缓存的效果，就是在Android手机的设置 -> 应用 -> 应用管理，找到微信，然后在应用管理里中去清除微信APP的缓存，如下图所示！
清除微信浏览器缓存的其他解决方案：
1、在HTML页面的head中设置meta标签 为不缓存（但是这个种方法在微信浏览器中无效）：
2、重命名相关静态资源：
最后关于缓存问题，个人觉得还是要从开发上入手，因为不是所以的用户都会 或者 都愿意去清除缓存的，所以只有从最初的起点去规避这个问题。
重命资源主要是为了在加载网页相关资源时，不去读缓存，而是从服务器中去重新获取。只要重新给资源命合后，就会被当作新资源加载，就不会存在缓存问题啦！
但是如果在文件资源比较多的情况下，不可能一个个去手动改吧，这样也太麻烦了，所以我们一般都借助一些构建工具如Webpack、Gulp、FIS、Grunt等 给文件资源进行重命名，或 用在现流行的前端框架如：Vue、React、Angurl等，它们都带有资源命名功能的！
打包生成后的文件资源如下图所示，每次打包生成后的文件资源，都会重新命名的，上线后就会当作新资源加载，所以就不会存在缓存的问题，并且只要开发以后不更新迭代版本(如果要更新迭代也不会影响，大不了用户在第一次加载时，重新请求一下文件资源，这点流量对用户来说跟本不是问题)，用户在更新迭代后的第一次也会自动缓存的，这样一来用户体验 和 更新迭代 就互不影响啦！
如：xxx.html、xxx.jpg、xxx.css、xxx.js等；
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/214516.html原文链接：https://javaforall.net
