微信H5、网页、内置Web浏览器 清理缓存，微信浏览器缓存

目录

一、写在前面：

1、浏览器缓存带来的好处：

2、浏览器缓存带来的弊端：

二、如何清除微信浏览器的缓存：

1、在IOS环境下手动清除微信缓存：

2、在Android环境下手动清除微信缓存：

三、清除微信浏览器缓存的其他解决方案：

1、在HTML页面的head中设置meta标签 为不缓存（但是这个种方法在微信浏览器中无效）：

2、重命名相关静态资源：

---

一、写在前面：

网页浏览器为什么要有缓存（baiBrowser Caching，浏览器缓存）？

我们都知道，在浏览器中打开一个网址时会经过：URL 解析 -> DNS 查询 -> TCP 连接 -> 处理请求 -> 接受响应 -> 渲染页面等一系步骤后，并且在不出任何(如，网速太慢，突然断网，服务器出错，代码出错等)意外的情况下，页面内容才能正常的展现在我们眼前。

而且在网页中所加载各种资源，都要建立HTTP连接，客户端(浏览器) 和 服务器要经过三次握手，四次挥手，再到页面DOM树渲染等过程，其实挺不容易的（尤其是在以前的网络环境和软硬件技术都还不太好的时候，不过现在的飞速发展，软硬件等各方面条件都好多了！），所以为了可以提高页面的呈现速度，就有了这个浏览器缓存。

1、浏览器缓存带来的好处：

我们在第一次浏览网页时，默认情况下浏览器会自动缓存所加载的系列资源，当我们再次打开访问之前的这个网页时，会先查看缓存是否有本次请需要请求的资源，如果有就直接从缓存读取(如果没有就请求服务器)，这样就便于我们在访问页面时：减少请求时间、节省网络流量，提高响应速度，我们带来更好的用户体验。

2、浏览器缓存带来的弊端：

缓存作为用户来讲确实有利，但是做为开发者来说，尤其是作前端开发的都知道，每当项目有新需求、版本更新迭代后，如果之前用户已经有的缓存时，所看到的页面还是之前浏览过的缓存效果，看不到更新后的效果，这种情况 尤其是在微信内置的浏览器中，更为严重（之前着急的时候，还让客服暂时教用户清除微信缓存来解决这个问题）。

二、如何清除微信浏览器的缓存：

由于微信浏览器在移动端 Android环境 和 IOS环境 中浏览器内核不一样；所以不同版本的微信 和 不同的系统 之间清理缓存的方式也就略有不同。

1、在IOS环境下手动清除微信缓存：

大至有以下几种清除方式（Android环境也适用）

1. 先退出当前微信账号登陆，然后重新登录微信；
2. 如果是微信公众号企业号等 先取关注，然后再重新关注。
3.  进入页面后，右上角的 "…" 按扭，在屏幕下面弹出的选项中点击 "刷新"。
4. 在微信底部导航菜单点击"我" ->  设置 -> 通用 -> 存储 -> 清理缓存 或 清理。

2、在Android环境下手动清除微信缓存：

在微信中打开 腾讯浏览器开发者服务提供的 X5内核调试专用页 网址：https://debugx5.qq.com，在微信浏览器中打开后，勾选要清除的选项，点击清除按扭即可！如下图所示：

注： 有的手机打开debugx5.qq.com可能会提示，"你使用的内核非X5内核，请前往。。。！"

出现以上情况后，请先微信浏览器中打开 http://debugmm.qq.com/?forcex5=true 这个网址 后，再打开 debugx5.qq.com ！就能打开啦！

除了上面的清除缓存方法以外，在Android环境中还有一种可以达到清除缓存的效果，就是在Android手机的设置 -> 应用 -> 应用管理，找到微信，然后在应用管理里中去清除微信APP的缓存，如下图所示！

三、清除微信浏览器缓存的其他解决方案：

1、在HTML页面的head中设置meta标签 为不缓存（但是这个种方法在微信浏览器中无效）：

2、重命名相关静态资源：

最后关于缓存问题，个人觉得还是要从开发上入手，因为不是所以的用户都会 或者 都愿意去清除缓存的，所以只有从最初的起点去规避这个问题。

原理就是：重命名资源主要是为了在加载网页相关资源时，不去读缓存，而是从服务器中去重新获取。只要重新给资源命合后，就会被当作新资源加载，就不会存在缓存问题啦！

但是如果在文件资源比较多的情况下，不可能一个个去手动改吧，这样也太麻烦了，所以我们一般都借助一些构建工具如Webpack、Gulp、FIS、Grunt、Vite等工具，可在配置文件中配置文件资源的输出路径、文件命名、大小限制等，配置好后在打包构建时自动给文件资源进行（一般是hash命名）重命名。现在做Web前端开发大部分都在用一些前端框架 如：Vue、React、Angurl等，它们都有一套完整的CLI脚手架，在最初构建项目时构建工具、默认配置等都帮我们做好了，非常方便，直接拿来使用即可！

打包生成后的文件资源如下图所示，每次打包生成后的文件资源，都会重新命名的，上线后就会当作新资源加载，所以就不会在去读取之前访问过的缓存文件了，并且只要开发以后不更新迭代版本(如果要更新迭代也不会影响，大不了用户在第一次加载时，重新请求一下文件资源，这点流量对用户来说跟本不是问题)，用户在更新迭代后的第一次也会自动缓存的，这样一来用户体验 和 更新迭代 就互不影响啦！

如：xxx.html、xxx.jpg、xxx.css、xxx.js等；