目录一、 图片查询优化1. 分布式缓存 (Redis)2. 本地缓存 (Caffeine)3. 多级缓存架构4. 缓存常见问题防范与进阶扩展二、 图片上传优化1. 图片压缩格式选择2. 图片压缩方案与后端实现3. 扩展知识文件秒传4. 扩展知识分片上传与断点续传三、 图片加载优化1. 缩略图 (Thumbnail)2. 懒加载 (Lazy Loading)3. 渐进式加载 (Progressive Loading) - 扩展知识4. CDN 加速与浏览器缓存四、 图片存储优化1. 数据沉降冷热数据分离2. 多维度图片清理策略3. 异步立即清理机制后端实现4. 扩展知识定期清理与批量操作一、 图片查询优化图片查询优化主要是围绕“缓存技术”来展开的对于经常访问的数据如首页、热门推荐等“读多写少”的场景利用缓存可以显著降低数据库压力并提高系统性能。1. 分布式缓存 (Redis)分布式缓存是指将缓存数据分布存储在多台服务器上以便在高并发场景下提供更高的吞吐量和容错性。Redis 是主流方案。核心优势基于内存操作读写极快单节点 QPS 可达 10万次每秒支持丰富的数据结构支持通过 Redis Cluster 构建高可用、高性能的分布式缓存。缓存设计三要素缓存 key为了区分不同查询条件将查询条件对象转为 JSON再通过MD5 算法进行压缩。同时拼接项目和业务前缀如yupicture:listPictureVOByPage:{MD5串}以进行隔离。缓存 value将数据库查出的 Page 分页对象转换为 JSON 结构字符串进行存储。过期时间通常设置为 5 ~ 60 分钟。为了防止缓存同时失效导致“雪崩”在代码中还会额外增加一个随机的过期时间如 0~300 秒内随机。开发实战后端通过引入spring-boot-starter-data-redis依赖利用StringRedisTemplate进行基础的增删改查操作。获取操作对象调用stringRedisTemplate.opsForValue()获取ValueOperations实例。写入/修改数据 (Set)使用valueOps.set(key, value)。读取数据 (Get)使用valueOps.get(key)。删除数据 (Delete)直接调用stringRedisTemplate.delete(key)。//获取操作对象 ValueoperationsString, String valueOps stringRedisTemplate.opsForValue2. 本地缓存 (Caffeine)相比分布式缓存本地缓存直接将数据缓存在应用的内存中如 JVM 中免去了网络传输速度更快。适用场景数据访问量有限的小型数据集、不需要服务器间共享数据的单机应用以及高频低延迟的访问场景。缓存设计与实现无需像 Redis 那样添加复杂的前缀隔离因为数据本身就是服务器隔离的key 可以更精简。需要自己创建初始化缓存结构通过Caffeine.newBuilder()构建可精确控制初始容量initialCapacity、最大缓存条数maximumSize以及过期时间expireAfterWrite。性能提升明显引入缓存后接口响应时间最快可达 12ms。3. 多级缓存架构结合本地缓存和分布式缓存的优点在同一业务场景下构建两级缓存系统兼顾本地缓存的高性能以及分布式缓存的数据一致性。工作流程接收请求 - 查询本地缓存 (Caffeine)如果命中则直接返回本地缓存数据。查询分布式缓存 (Redis)如果本地未命中则查 Redis。如果 Redis 命中更新本地缓存并返回 Redis 缓存数据。查询数据库如果 Redis 也未命中最后查询数据库。将结果依次更新到本地缓存和 Redis 缓存中最后返回数据库数据。4. 缓存常见问题防范与进阶扩展使用缓存时一般要注意防范以下几个问题并进行相应的扩展缓存击穿某些热点数据在缓存过期后大量请求直接打到数据库解决方案是设置热点数据的超长过期时间或使用互斥锁如 Redisson控制缓存刷新。缓存穿透用户频繁请求不存在的数据导致大量请求直接接触数据库查询解决方案是对无效查询结果也进行缓存如设置空值缓存或者使用布隆过滤器。缓存雪崩大量缓存同时过期导致请求打到数据库系统崩溃解决方案是设置不同的缓存过期时间避免同时过期或者使用多级缓存减少对数据库的依赖。其他扩展优化手动刷新缓存提供一个刷新缓存的接口仅管理员可调用。自动识别热点图片缓存采用热 key 探测技术实时统计图片的访问量并自动将热点图片添加到内存缓存中。查询与代码优化获取图片列表时只查询必要的字段如果缓存逻辑复杂可单抽一个CacheManager统一管理缓存操作。没问题按照您要求的排版格式为您总结这部分关于图片上传优化的核心内容二、 图片上传优化对于图库类网站图片压缩和上传优化是最基础且最重要的操作能够显著减少图片文件大小从而降低带宽和流量消耗在大幅降低存储成本的同时提高图片的加载速度。主要是通过腾讯云提供的SDK接口。1. 图片压缩格式选择在不影响图片质量的前提下将图片转换为体积更小的现代格式是首选方案。目前主流的现代图片格式有两种WebP由 Google 开发支持有损和无损压缩。体积比 PNG 小约 26%比 JPEG 小约 25%-34%且支持透明背景Alpha 通道。兼容性好绝大部分主流浏览器均已支持是当前最推荐的格式。AVIF基于 AV1 视频编码技术压缩率更高画质更优且支持 HDR。但目前浏览器兼容性不如 WebP。2. 图片压缩方案与后端实现为了减少开发成本项目中没有使用本地图像处理库而是直接利用腾讯云 COS 的“数据万象”服务在上传图片的同时自动进行压缩处理。处理规则构建在 Java 后端上传代码中通过构造PicOperations对象并添加处理规则如imageMogr2/format/webp指示云服务在接收文件时将其转换为 WebP 格式。获取压缩结果修改上传模板代码文件上传完成后从腾讯云返回的ProcessResults中提取压缩后图片的信息包括压缩后的宽、高、大小、格式及新的图片 URL并将其封装返回存入数据库。3. 扩展知识文件秒传文件秒传是一种避免重复上传相同文件、节约带宽和存储资源的优化技术常用于网盘类大文件上传场景。工作流程客户端在上传前先计算文件的唯一指纹如 MD5 或 SHA-256 哈希值。服务端接收到哈希值后在数据库中查询是否已存在相同指纹的文件。若存在则直接返回已有文件的存储路径并建立数据关联实现“秒传”若不存在才执行真实的上传逻辑。项目局限性本项目以小图片为主重复率低且受限于云存储路径隔离的要求避免不同用户共享同一物理地址引发权限问题因此秒传作为扩展知识了解即可。4. 扩展知识分片上传与断点续传当需要上传大文件时常规的单次上传容易因网络波动导致失败。分片上传将大文件切割成多个小数据块并发上传。断点续传记录已上传的分片失败重试时只需上传未完成的部分。实现方案无需从零手写复杂逻辑可以直接使用各大云厂商对象存储提供的高级 SDK 接口如腾讯云的TransferManager只需在代码中配置好分块上传的触发阈值例如文件大于 5MB 时开启和分块大小例如 1MB 一块SDK 会自动在底层完成分片和续传工作。三、 图片加载优化这部分优化的核心目的是提升页面的加载速度、减少带宽消耗并改善用户体验。在技术实现上主要结合了“云服务端的图像处理能力腾讯云 COS/数据万象 SDK”以及“前端浏览器的渲染机制与 API”来共同完成。1. 缩略图 (Thumbnail)系统首页如果直接加载原图不仅加载时间极长还会造成巨大的流量浪费。缩略图技术就是在图片列表页展示尺寸和体积极小的图片仅在用户进入详情或下载时才加载原图。实现方案云端 SDK 处理与之前讲的“图片压缩转 WebP”方法完全一致。我们无需在本地手写裁剪代码而是继续利用腾讯云 COS 的“数据万象”服务。在后端 Java 代码上传文件时向PicOperations规则列表中再追加一条缩略图处理规则如imageMogr2/thumbnail/%sx%s。云端就会在保存原图的同时自动生成一张等比缩放的缩略图并将缩略图 URL 返回给后端存入数据库新增thumbnailUrl字段。避坑与逻辑优化如果上传的图片原本就非常小比如只有十几 KB强行生成缩略图反而可能导致生成后的文件比原图还大。因此在后端代码中增加了一层拦截逻辑仅当原图大小超过 20KB 时才向云端下发生成缩略图的规则。优化后效果显著例如 350KB 的原图缩略图可降至约 3.6KB缩小近百倍。2. 懒加载 (Lazy Loading)懒加载是指避免在打开页面时一次性请求所有图片而是只有当资源图片随着用户向下滚动页面进入浏览器可视区域时才去发起真实的网络请求。这完全依赖前端技术来实现。实现方案HTML 原生属性直接在img标签上添加loadinglazy属性。这是最简单的做法但对部分老旧浏览器如 IE不兼容且不支持复杂的触发机制。JS Intersection Observer API推荐这是现代浏览器提供的高效 API。思路是初始时将真实的图片地址存在自定义属性如data-src中src放一个极小的透明图或留空。当 Observer 监测到该图片元素进入视口范围时再通过 JS 将data-src的值赋给真实的src属性从而触发加载。其他方式使用传统的 JS 监听scroll滚动事件计算位置或者直接引入成熟的第三方前端库如lazysizes来代劳。3. 渐进式加载 (Progressive Loading) - 扩展知识渐进式加载主要用于超清大图加载或者用户网络环境较差时的体验兜底。工作原理在真实的超大图片完全加载出来之前先加载一张极低分辨率的模糊占位图。等背后真实的高清原图下载完毕后再瞬间替换掉占位图给用户一种“图片慢慢变清晰”的视觉过渡。实现方案前端 UI 组件在现代前端开发中通常不需要手写这套复杂的替换逻辑可以直接利用现成的 UI 组件库。例如使用Ant Design Vue 的Image图片组件该组件原生支持placeholder属性放入低清图地址即可轻松实现渐进式加载。4. CDN 加速与浏览器缓存虽然截图中未详细展示代码但大纲中也提到了这两种必不可少的网络层优化手段CDN 加速依托云厂商将图片分发到离用户物理距离最近的边缘节点大幅降低网络传输延迟。浏览器缓存通过配置 HTTP 响应头让用户的浏览器在本地“记住”已经看过的图片下次打开页面直接从本地磁盘秒读图片彻底省去网络请求。四、 图片存储优化这部分优化的主要目的是严格控制云存储的成本释放无用数据占用的空间。在技术实现上这部分主要结合了“腾讯云 COS 控制台的原生规则配置零代码实现”以及“Spring Boot 的异步任务Async与定时任务”来共同完成。1. 数据沉降冷热数据分离随着时间推移大部分历史图片的访问热度会逐渐降低。为了节约成本可以将久无人问津的“冷数据”从昂贵的标准存储转移到便宜的低频存储或归档存储中。实现方案云端可视化配置这部分不需要编写复杂的业务代码可以直接登录腾讯云 COS 控制台利用其提供的“生命周期”功能添加规则。例如设置“文件修改时间 30 天后沉降至低频存储”。云服务会自动在后台执行转移大幅降低长期存储的成本。2. 多维度图片清理策略对于用户已删除的图片或临时文件如果不去清理云存储的费用会不断累加。项目中结合了以下几种常见的清理策略立即清理在数据库删除图片记录时立刻关联删除云存储中的图片文件保证数据一致性。手动清理提供后台接口由管理员手动触发清理任务筛选并清理冗余文件。定期清理通过定时任务如 Spring Scheduler每天/每周自动扫描并清理“未访问过”或“已废弃”的数据兜底策略。惰性清理平时不清理只有当存储空间告急时才触发清理类似 Redis 的内存淘汰机制本项目为节省成本未使用该策略。3. 异步立即清理机制后端实现为了保证用户在前端点击“删除图片”时的响应速度不能让网络请求调用云服务删除文件阻塞主线程。实现方案Spring 异步注解在 Spring Boot 启动类上添加EnableAsync开启异步功能。在图片清理方法clearPictureFile上添加Async注解使其在独立线程中异步执行。调用腾讯云 SDK 的cosClient.deleteObject方法分别删除云端的原图和缩略图。避坑逻辑在执行真实删除前代码中加入了一次数据库校验。统计该图片的 URL 是否还被其他记录引用应对前面提到的“文件秒传”场景多条记录共用一个物理文件。只有当引用次数 1时才真正调用云服务删除文件防止误删。4. 扩展知识定期清理与批量操作定时任务兜底如果在“立即清理”时刚好遇到网络抖动导致删除失败会产生云端的“孤儿文件”。可以通过 Spring Scheduler 编写定时任务作为兜底定期比对数据库和云存储的差异进行清理。批量删除 API如果一次性要清理大量文件不要在for循环中挨个调用单文件删除接口应该直接使用云存储 SDK 提供的批量删除接口这样可以极大减少网络 I/O 开销提高清理效率。补充说明第五部分其他优化Redis 分布式 Session。解决痛点项目后端每次重启后存在本地 JVM 的用户登录状态Session就会丢失导致开发者/用户频繁需要重新登录。实现方案引入spring-session-data-redis依赖并在application.yml中将 session 的store-type配置为redis并设置过期时间如 30 天。效果一行代码不用写Spring Boot 就会自动将用户的 Session 状态接管并持久化到本地的 Redis 中。服务器无论怎么重启只要 Redis 数据还在用户就始终保持登录状态。