微信H5、网页、内置Web浏览器清理缓存，微信浏览器缓存_h5重命名相关静态资源-程序员宅基地

技术标签：清理缓存浏览器缓存微信H5缓存 X5内核缓存清理微信网页清理缓存公众号 / 小程序

一、写在前面：

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等；

本文链接：https://blog.csdn.net/muguli2008/article/details/109383100

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Unity学习心得_unity课程总结心得-程序员宅基地

文章浏览阅读4.2k次，点赞2次，收藏12次。Unity学习心得第一个项目 Roll A Ball1.基本模型和场景操作双击Cube,表示聚焦（在Scene场景中）或者按下 F键Persp:透视视图（会产生近大远小） ISO：平行视野（不会产生近大远小的效果）2.世界坐标系和局部坐标系：世界坐标：以世界原点为中心的坐标局部坐标：以父节点的中心_unity课程总结心得

maven的下载与安装教程（超详细）_maven安装-程序员宅基地

文章浏览阅读10w+次，点赞432次，收藏1.1k次。前言本篇文章是基于win10系统下载安装Maven的教程。一、 Maven介绍1. 什么是Maven Maven是一个跨平台的项目管理工具。作为Apache组织的一个颇为成功的开源项目，其主要服务于基于Java平台的项目创建，依赖管理和项目信息管理。maven是Apache的顶级项目，解释为“专家，内行”，它是一个项目管理的工具，maven自身是纯java开发的，可以使用maven对java项目进行构建、依赖管理。2. Maven的作用依赖管理依赖指的就是是我们项目中需要使用的第三方_maven安装

研究生如何读文献写论文发文章毕业论文_研究生一天读多少文献-程序员宅基地

文章浏览阅读2.1k次，点赞3次，收藏13次。研究生论文写作步骤1. 先看综述，后看论著。看综述搞清概念，看论著掌握方法。2. 早动手在师兄师姐离开之前学会关键技术。3. 多数文章看摘要，少数文章看全文。掌握了一点查全文的技巧，往往会以搞到全文为乐，以至于没有时间看文章的内容，更不屑于看摘要。真正有用的全文并不多，过分追求全文是浪费，不可走极端。当然只看摘要也是不对的。4. 集中时间看文献，看过总会遗忘。看文献的时间越分散_研究生一天读多少文献

微光app电脑版_智米电暖器智能版1S体验：全面领跑AIoT、将智能生活进行到底-程序员宅基地

文章浏览阅读547次。【科技犬体验】2019年10月15日，智米正式推出了旗下电暖器新品——智米电暖器1S和智米电暖器智能版1S对于没有集中供暖的长江中下游地区居民而言，电暖器是不折不扣的"保命神器"。而在深秋的北方，昼夜温差较大，这种时候使用灵活、易于搬运的电暖器也成为更加明智的选择。在北方每年的冬季，室内温度就直接关系着大家在家的舒适度，而对于室内温度不达标的用户，购买电暖器就成为几乎唯一的选择。科技犬已经入手智米..._智米电暖器智能版app

《Hadoop与大数据挖掘》——2.6　TF-IDF算法原理及Hadoop MapReduce实现-程序员宅基地

文章浏览阅读312次。本节书摘来自华章计算机《Hadoop与大数据挖掘》一书中的第2章，第2.6节，作者张良均樊哲位文超刘名军许国杰周龙焦正升，更多章节内容可以访问云栖社区“华章计算机”公众号查看。2.6　TF-IDF算法原理及Hadoop MapReduce实现2.6.1　TF-IDF算法原理原理：在一份给定的文件里，词频（Term Frequency，..._hadoop mapreduce如何实现实现tf-idf

Layui实现点击文字、缩略图查看图片功能_layui查看图片-程序员宅基地

文章浏览阅读4.3k次。刚完成一个客户需求，同一个页面上要有点击缩略图查看大图功能，也有点击图片名称查看原图的功能。点击缩略图查看大图的功能点击缩略图查看大图的功能实现用的是layui开发文档内的layer.photos-相册层。官方开发文档里photos支持传入json和直接读取页面图片两种方式。下面是官方开发文档的截图，官方开发文档链接：https://www.layui.com/doc/m..._layui查看图片