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

article/2025/10/3 13:13:06

目录

一、写在前面:

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

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


http://chatgpt.dhexx.cn/article/c9ddxxKe.shtml

相关文章

Spring AOP实现原理简介

AOP联盟标准 AOP联盟将AOP体系分为三层&#xff0c;从三层结构可以看出&#xff0c;AOP实现方式有很多种&#xff0c;包括反射、元数据处理、程序处理、拦截器处理等&#xff0c;通过本节学习&#xff0c;你就会看到Spring AOP的实现使用的是Java语言本身的特性&#xff0c;即J…

Spring 面向切面编程 第4关:AOP实现原理-CgLib动态代理

目录 任务描述 相关知识 代理模式(Proxy) AOP实现的两种方式 CGLIB动态代理步骤 模拟AOP实现 代理类说明 编程要求 测试说明 参考代码 任务描述 我们知道&#xff0c;Spring AOP的主要作用就是不通过修改源代码的方式、将非核心功能代码织入来实现对方法的增强。那么…

Spring AOP实现原理详解之Cglib代理实现

引入 我们在前文中已经介绍了SpringAOP的切面实现和创建动态代理的过程&#xff0c;那么动态代理是如何工作的呢&#xff1f;本文主要介绍Cglib动态代理的案例和SpringAOP实现的原理。 要了解动态代理是如何工作的&#xff0c;首先需要了解 什么是代理模式&#xff1f;什么是…

Spring——AOP用到的代理模式SpringAOP实现原理

AOP&#xff0c;面向切面编程&#xff0c;是Spring框架中的核心思想之一&#xff1b;在Spring中是通过动态代理来实现的&#xff0c;在目标类的基础上增加切面逻辑&#xff0c;对原对象进行增强&#xff1b; SpringAOP的源码中用到了两种动态代理来实现拦截切入功能&#xff1…

深入分析 Spring 基于注解的 AOP 实现原理

一、AOP 的基本使用 AOP 的使用分为三步走&#xff1a; 将业务逻辑组件和切面类都加入到容器中&#xff1a;告诉 Spring 哪个是切面类&#xff1b;Aspect在切入类上的每一个通知方法上标注通知注解&#xff1a;告诉 Spring 何时何地运行&#xff08;切入点表达式&#xff09;…

灵魂画手图解Spring AOP实现原理!

本篇旨在让读者对Spring AOP实现原理有一个宏观上的认识&#xff0c;因此会丢失一些细节&#xff0c;具体实现参考&#xff1a;老实人Spring源码目录 阅读本篇文章前&#xff0c;希望读者对Spring Ioc以及Spring AOP的使用(Aspect)由一定了解&#xff0c;话不多说&#xff0c;直…

Spring AOP实现原理

1、Spring AOP Spring AOP的面向切面编程&#xff0c;是面向对象编程的一种补充&#xff0c;用于处理系统中分布的各个模块的横切关注点&#xff0c;比如说事务管理、日志、缓存等。它是使用动态代理实现的&#xff0c;在内存中临时为方法生成一个AOP对象&#xff0c;这个对象…

AOP实现原理详解

&#xfeff;&#xfeff; 转载地址&#xff1a;https://my.oschina.net/elain/blog/382494 一、什么是 AOP AOP&#xff08;Aspect-OrientedProgramming&#xff0c;面向切面编程&#xff09;&#xff0c;可以说是OOP&#xff08;Object-Oriented Programing&#xff0c;面向…

Spring框架的AOP实现原理

一、AOP的基本概念 AOP先是一种思想&#xff0c;后是一种技术。 AOP&#xff1a;面向切面编程&#xff0c;是将那些与业务无关&#xff08;比如有事务处理&#xff0c;日志管理&#xff0c;权限控制等&#xff09;&#xff0c;但要为业务模块共同调用的逻辑封装成一个可重用的…

Java:由浅入深揭开 AOP 实现原理

概述&#xff1a; 最近在开发中遇到了一个刚好可以用AOP实现的例子&#xff0c;就顺便研究了AOP的实现原理&#xff0c;把学习到的东西进行一个总结。文章中用到的编程语言为kotlin&#xff0c;需要的可以在IDEA中直接转为java。 这篇文章将会按照如下目录展开&#xff1a; A…

Spring的AOP原理

为什么80%的码农都做不了架构师&#xff1f;>>> 一、什么是 AOP AOP&#xff08;Aspect-OrientedProgramming&#xff0c;面向切面编程&#xff09;&#xff0c;可以说是OOP&#xff08;Object-Oriented Programing&#xff0c;面向对象编程&#xff09;的补充和完…

利用C语言实现动态数组

数组存在的问题&#xff1a;如果我们定义一个数组去存储数据&#xff0c;需要提前定义数组的个数&#xff0c;或者数组根据第一次存储的元素个数自动确定数组的大小&#xff0c;但是我们如果想对数组进行元素插入只能重新定义一个新数组&#xff0c;或者预定义一个空间非常大的…

C++数组之动态数组

目录 1.摘要 2.动态数组内存分配 1一维数组 2多维数组&#xff08;以2维为例&#xff09; 3.动态数组初始化 1默认初始化 2.自定义初始化 4.动态数组释放 5.例子 Gradebook类的实现 6.参考文章 1.摘要 数组是一种顺序存储的数据结构&#xff0c;在定义数组时&…

C++中如何定义动态数组

首先&#xff1a;为什么需要动态定义数组呢&#xff1f; 这是因为&#xff0c;很多情况下&#xff0c;在预编译过程阶段&#xff0c;数组的长度是不能预先知道的&#xff0c;必须在程序运行时动态的给出 但是问题是&#xff0c;c要求定义数组时&#xff0c;必须明确给定数组…

c++ 动态数组

动态数组 相关数组知识连接 数组详解 多维数组 在之前的文章中&#xff0c;讲解了数组的相关知识&#xff0c;那一种数组&#xff08;数组相关连接&#xff1a;https://blog.csdn.net/m0_62870588/article/details/123787052&#xff09;又称是静态数组&#xff0c;因为它的大小…

C语言中动态分配数组

很多人在编写C语言代码的时候很少使用动态数组&#xff0c;不管什么情况下通通使用静态数组的方法来解决&#xff0c;在当初学习C语言的时候我就是一个典型的例子&#xff0c;但是现在发现这是一个相当不好的习惯&#xff0c;甚至可能导致编写的程序出现一些致命的错误。尤其对…

C语言学习笔记:动态数组

动态数组 数组是C语言中的很重要的一种构造类型&#xff0c;最初我们学习的都是静态数组&#xff0c;但是&#xff0c;静态数组有着自己难以改变的缺点——数组长度固定。 一般在静态数组定义后&#xff0c;系统就会为其分配对应长度的连续的专有内存空间&#xff0c;可是&am…

C语言如何实现动态数组?

提出问题 请问在c语言里如何实现动态大小的数组啊&#xff0c;比如说int a[N];&#xff0c;这里N的值可以在程序中定&#xff0c;或者有什么方法可以实现类似的功能&#xff1f;总之只要在编译时不用制定数组大小就行。 分析问题 嵌入式系统的内存是宝贵的&#xff0c;内存是否…

C的动态数组的详细知识(网上收集到的大量详细知识以及个人理解的汇总)

动态数组是指在声明时没有确定数组大小的数组&#xff0c;即忽略圆括号中的下标&#xff1b;当要用它时&#xff0c;可随时用ReDim语句重新指出数组的大小。使用动态数组的优点是可以根据用户需要&#xff0c;有效利用存储空间。 可以了解动态数组的详细定义 一.C版本动态数组…

动态数组C语言实现详解

目录 0、前言 一、动态数组数据结构 二、动态数组增删改查函数声明 三、数组创建 1、头部动态创建 2、头部静态创建 四、元素添加 五、元素删除 1、根据元素值删除 2、根据元素位置删除 六、元素修改 七、元素查找 八、数组清空 九、数组销毁 十、验证程序 0、前…