目录
一、写在前面:
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内核调试专用页网址:,在微信浏览器中打开后,勾选要清除的选项,点击清除按扭即可!如下图所示:
注: 有的手机打开可能会提示,"你使用的内核非X5内核,请前往。。。!"
出现以上情况后,请先微信浏览器中打开 /?forcex5=true这个网址 后,再打开!就能打开啦!
除了上面的清除缓存方法以外,在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浏览器 清理缓存 微信浏览器缓存》对你有帮助,请点赞、收藏,并留下你的观点哦!