微信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环境也适用）

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

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标签为不缓存（但是这个种方法在微信浏览器中无效）：

<head><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Expires" content="0" /><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
</head>

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

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

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

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

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

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

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

使用Synology群晖内置web station和榴莲壳发布自己的网站（三）如何访问自己服务器里的网页
使用Synology群晖内置web station和榴莲壳发布自己的网站(三)如何访问自己服务器里的网页配置榴莲壳的申请榴莲壳设置 Web Station完成最后一步设置 internet顺利访 ...
关于微信PC版内置浏览器和IOS11以下系统打开页面白屏的问题
最近在开发的微信公众号项目出现了白屏的问题,安卓端一切正常,只在IOS11以下的苹果手机端和微信PC版内置浏览器打开才会发生. 网上找了很多资料,最后确定是前端JS代码使用了ES6版本的语法,而IOS ...
谷歌修改useragent，chrome模拟微信、QQ内置浏览器
1.首先咋模拟时,需要用到UA,微信和 QQ 内置浏览器 UA 安卓 QQ 内置浏览器 UA: Mozilla/5.0 (Linux; Android 5.0; SM-N9100 Build/LRX2 ...
Chrome模拟微信、QQ内置浏览器
在Chrome中模拟微信内置浏览器微信和QQ内置浏览器UA 安卓QQ内置浏览器UA: Mozilla/5.0 (Linux; Android 5.0; SM-N9100 Build/LRX21V) ...
微信H5网页链接如何自定义分享标题，简介和图片
微信H5网页链接怎么才能自定义分享标题,简介和图片? 需求概述微信中可以直接转发网页链接,用户在微信内置浏览器中打开后可以通过微信浏览器中右上角进行分享到朋友,朋友圈,QQ等.但直接这样分享的话,用 ...
php web server setup,PHP本地开发利器：内置Web Server
PHP 5.4.0起, CLI SAPI 提供了一个内置的Web服务器. 命令:php -S 这个内置的Web服务器主要用于本地开发使用,不可用于线上产品环境. URI请求会被发送到PHP所在的的工作 ...
浅谈:Spring Boot原理分析,切换内置web服务器,SpringBoot监听项目(使用springboot-admin),将springboot的项目打成war包
浅谈:Spring Boot原理分析(更多细节解释在代码注释中) 通过@EnableAutoConfiguration注解加载Springboot内置的自动初始化类(加载什么类是配置在spring.f ...
php打印函数console,PHP内置Web Server探究（2）自定义PHP控制台输出console函数
PHP内置Web Server探究(二)自定义PHP控制台输出console函数我们在开发APP的服务器端,当和APP进行联调时通常需要实时跟踪URL请求和参数的接收情况. 但PHP并没有像Pyth ...
微信H5页面内实现一键关注公众号
H5页面内实现关注公众号的微信JSSDK没有相关接口开放,因此就得动点脑筋来实现该功能了.下面的方法就是通过一种非常蹊跷的方式实现的. 首先,需要在公众号内发表一篇原创文章,注意是原创文章,然后由另一 ...
使用Synology群晖内置web station和榴莲壳发布自己的网站（一）安装Web Station
使用Synology群晖内置web station和榴莲壳发布自己的网站(一)安装Web Station 配置自己用html写一个简单网站用于test 群晖安装web station 自从入手了群晖 ...

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