PHP如何实现定时刷新的用户头像缓存 且更新时加载最新资源
头像缓存无闪烁方案
该需求完全可以实现,核心通过HTTP缓存策略+版本号戳的组合方案,可同时满足缓存复用、更新及时、无刷新闪烁的要求。
核心改造步骤
1. 头像地址新增版本标识
- 服务端在用户表新增
avatar_version字段,用户每次更新头像时,将该字段值+1,或生成新的随机哈希值存入 - 头像资源地址统一携带版本参数,格式示例:
/static/avatar/{用户ID}?v={版本号},也可将版本号直接嵌入文件路径,如/static/avatar/{用户ID}_{版本哈希}.png
2. 配置服务端缓存规则
给所有头像资源的响应头配置永久强缓存,浏览器只要访问过一次该地址的资源,后续就会直接读取本地缓存,不会再向服务端发请求,自然不会出现闪烁。
示例Nginx配置参考:
location /static/avatar/ { # 缓存1年 expires 365d; add_header Cache-Control "public, immutable"; }
如果用的是Node.js、Java等后端服务,直接在返回头像资源的接口里添加对应响应头即可。
3. 优化轮询逻辑
原有全量拉取头像资源的轮询完全没必要,调整为1秒轮询只拉取全量用户的头像版本号列表即可,接口返回格式示例:
[ {"user_id": 1001, "avatar_version": 3}, {"user_id": 1002, "avatar_version": 5} ]
前端本地维护一份用户ID和对应头像版本号的映射表,每次拿到轮询结果后做比对:
- 版本号和本地存储一致的用户,头像节点完全不做修改
- 版本号高于本地存储的用户,才更新对应头像DOM的
src属性为带新版本号的地址,触发拉取最新头像
可选优化
如果要进一步降低服务端压力,可以把轮询改为WebSocket推送,只有用户更新头像时,才给相关在线用户推送更新通知,完全避免无效请求。
内容的提问来源于stack exchange,提问作者Mash Mixture
相关产品推荐
相关产品推荐

