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

写在前面:

网页浏览器为什么要有缓存浏览器缓存(baiBrowser Caching)?

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

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

浏览器缓存带来的好处:

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

浏览器缓存带来的弊端:

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

 

如何清除微信浏览器的缓存:

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

 

在IOS环境下手动清除微信缓存:

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

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

在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等 给文件资源进行重命名,或 用在现流行的前端框架如:Vue、React、Angurl等,它们都带有资源命名功能的!

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

如:xxx.html、xxx.jpg、xxx.css、xxx.js等;

猜你喜欢

转载自blog.csdn.net/muguli2008/article/details/109383100