首页 > 其他分享 >解决微信H5的图片缓存问题

解决微信H5的图片缓存问题

时间:2023-07-05 23:13:14浏览次数:52  
标签:Control 缓存 no 微信 Cache H5 服务器 store

一、缓存可以解决什么问题?他的缺点是什么?

1、缓存可以解决什么问题:

  • 减少不必要的网络传输,节约宽带
  • 更快的加载页面
  • 减少服务器负载,避免服务器过载的情况出现

2、缓存的缺点:

  • 占内存,有些缓存会被存到内存中
  • 页面更新不及时,使用过时的图片、样式文件

3、总结来说:

  • 开发阶段需要频繁修改图片,客户端缓存问题尤为严重,应该尽量避免缓存
  • 生产阶段需要节省流量、带宽

二、如何解决图片缓存问题?

生产环境下:生产环境通过CDN加版本号来控制文件缓存,甚至还可以使用更加粗暴的方案,直接修改文件名。

开发环境下:通过修改静态资源文件响应头Cache-Control​,来达到自定义缓存的目的。

1、强制缓存

Cache-Control:max-age=N;

N就是需要缓存的秒数。从第一次请求资源的时候开始,往后N秒内,资源若再次请求,则直接从磁盘(或内存中读取),不与服务器做任何交互。N秒后重新请求,会再次从服务器拉取资源。

image

2、禁用缓存

Cache-Control:no-store;

设置no-store​策略后,浏览器对该资源的每一次请求都会从服务端获取。

image

3、协商缓存

协商缓存就是浏览器和服务器之间拟定一个规则,用于判断文件是否发生了变化,然后再决定是从服务器拉取还是从缓存中读取。

以上三种缓存方案,协商缓存理论上最优秀,实践中最复杂。

三、Nginx修改静态资源请求头

location ~ .*\.(gif|jpg|pdf|jpeg|png)$ {
    add_header Cache-Control no-store;
}

2、禁止缓存js资源

location ~ .*\.(js)$ {
    add_header Cache-Control no-store;
}

3、禁止缓存样式文件、字体文件

location ~ .*\.(css|ttf|otf)$ {
    add_header Cache-Control no-store;
}

1、禁止缓存图片资源

四、参考链接

1、中高级前端工程师都需要熟悉的技能--前端缓存

2、微信小程序web-view缓存问题及解决方案

3、http Cache-Control详解及nginx设置Cache-Control

标签:Control,缓存,no,微信,Cache,H5,服务器,store
From: https://www.cnblogs.com/one-yutian/p/solve-the-problem-of-the-picture-cache-of-wechat-h5-z

相关文章

  • 解决浏览器SSL缓存,自动将http跳转至https导致无法访问的问题
    PHP交流群  656679284  为PHP广大爱好者提供技术交流,有问必答,相互学习相互进步!这里汇总一下几大常见浏览器HSTS的关闭方法。Safari浏览器完全关闭Safari删除 ~/Library/Cookies/HSTS.plist 这个文件重新打开Safari即可极少数情况下,需要重启系统Chrome浏览器......
  • ios应用免签+微信双开
    一句话概括:用TrollStore自动加签安装微信ipa文件,实现ios上微信应用分身。工具:1.ios14.12.GTACarTracher这个应用程序并不是真正的GTACarTracker,而是伪装的TrollStoreHelper。GTA就是TrollStore的安装器3.TrollStore:巨魔ios免费自签工具,可以用来安装ipa文件,ipa......
  • 微信小程序开发避坑
    1.wx.showModal未报错,也未执行。title必须为string类型wx.showModal({title:res.statusCode,content:'错误码:'+res.statusCode,showCancel:false,complete(){isShow=false}})2.map组件移动marker闪烁不能直接......
  • git忽略指定文件缓存至仓库
    在文件根目录添加“.gitignore”文件HELP.mdtarget/!.mvn/wrapper/maven-wrapper.jar!**/src/main/**!**/src/test/**###STS###.apt_generated.classpath.factorypath.project.settings.springBeans.sts4-cache###IntelliJIDEA###.idea*.iws*.iml*.ipr......
  • C#使用企业微信群聊机器人API
    publicclassOperationResult{publicboolIsSuccess{get;set;}publicintErrorCode{get;set;}publicstringContent{get;set;}}OperationResultinternalstaticclassTextType{internalst......
  • 客服系统机器人源码-微信专属个人助理可对接GPT
    我们大家都见过很多微信机器人,对接了GPT以后效果非常好,可以作为微信群里的助理,帮助我们回答各种问题 现在我来分享一下微信机器人的源码,该源码是golang开发,可以实现模拟个人微信桌面版登录,监听到微信的各种消息。下面就是完整代码packagemainimport("fmt""gi......
  • 详解Mybatis一级缓存和二级缓存
    mybatis包含了一个非常强大的查询缓存特性,他可以非常方便的定制和配置缓存。缓存可以极大的提高查询的效率mybatis系统当中默认定义了两级缓存:一级缓存和二级缓存一级缓存:默认情况之下,只有一级缓存开启(sqlSession级别的缓存)二级缓存:需要手动开启配置,需要局域namespace级别的缓......
  • 接口缓存、定时更新、异步发送短信
    目录一、接口缓存二、双写一致性之定时更新celery的定时任务代码celery_task/home_task.pycelery_task/celery.py启动worker、beta三、异步发送短信步骤视图函数user/views.py任务celery_task/user_task.py四、异步秒杀逻辑前后端4.1前端Sckill.vue4.2后端视图类路由任务:celery......
  • 如何保持缓存和数据库中的数据一致
    背景缓存是软件开发中一个非常有用的概念,数据库缓存更是在项目中必然会遇到的场景。而缓存一致性的保证,更是在面试中被反复问到,这里进行一下总结,针对不同的要求,选择恰到好处的一致性方案。缓存是什么存储的速度是有区别的。缓存就是把低速存储的结果,临时保存在高速存储的技术。......
  • 【本周特惠课程】深度学习6大模型部署场景(Pytorch+NCNN+MNN+Tengine+TensorRT+微信小
    前言欢迎大家关注有三AI的视频课程系列,我们的视频课程系列共分为5层境界,内容和学习路线图如下:第1层:掌握学习算法必要的预备知识,包括Python编程,深度学习基础,数据使用,框架使用。第2层:掌握CV算法最底层的能力,包括模型设计基础,图像分类,模型分析。第3层:掌握CV算法最核心的方向,包括图像分......