图片后面添加时间戳后,每次请求都会重新获取图片吗?

2023-06-30 16:01:54 +08:00
 coolair
比如,获取头像的地址是这样的 http://localhost/user/{id}/avatar

但是,img 标签的 src 用这个地址,如果换了头像就不会变了,考虑在链接后面添加时间戳:

"http://localhost/user/{id}/avatar?" + new Date().getTime()

这样的话,每次刷新/请求都是新的时间戳,如果头像没有修改,会一直重复下载图片吗?

我怕如果每次刷新都全部重新加载的话,会给服务器造成压力。
1260 次点击
所在节点    问与答
25 条回复
ClarkAbe
2023-06-30 16:11:07 +08:00
肯定会啊...query 变化了浏览器就不缓了...
bjzhush
2023-06-30 16:20:30 +08:00
你这个时间戳参数加的莫名其妙的,可以说一下你为什么这么加
至于缓存,可以去看看浏览器的 etag last modified 等关于缓存控制的相关内容
如果你是想定时刷新,还有一种办法是可以通过参数控制周期,那就是把你刚刚的时间戳换成 ymd ,那么每天刷新一次,换成 ym ,那么每月刷新一次,不过常见的做法还是通过 Nginx 的一些 header 参数来控制缓存
x86
2023-06-30 16:25:47 +08:00
服务器:顶住了,这把高端局
ShundL
2023-06-30 16:27:28 +08:00
难道你上传的头像原始地址是固定的吗?
ShundL
2023-06-30 16:28:13 +08:00
@ShundL #3 不好意思,理解错了,请无视
coolair
2023-06-30 17:06:04 +08:00
@bjzhush 主要是链接固定,用户修改自己的头像后,页面上原有的图片不会更新。
296727
2023-06-30 17:12:11 +08:00
用 etag 不需要管这些,或者直接用 oss ,不需要你来操心
bjzhush
2023-06-30 17:13:19 +08:00
@coolair 那你可以在 user 表加一个 avatar 字段,用于存储用户的头像地址,这属于设计上的问题,没有必要增加本来不需要的技术复杂度,你自己注册几个网站,然后去换下头像,看看用户头像地址是怎么设计的,更换之后是怎么变化的
NoOneNoBody
2023-06-30 17:23:10 +08:00
加时间戳本来就是为了抗缓存的,例如股票实时价格,当然股票这种也不会用静态图片
时间戳可以按变化频率定,太细自然是每次请求都重新下载,例如下个月就自动变换的图片,时间戳就细化到月份
junkk
2023-06-30 17:29:01 +08:00
@296727 #7 oss 才需要关心这个问题吧,上家公司上的 oss ,缓存严重,更换同名文件后不会变化内容,必须更新时间戳
tool2d
2023-06-30 17:30:24 +08:00
@296727 如果 jpg 头像 url 地址不变,在缓存时间之内,浏览器根本就不会发送新请求,更别提 etag 了。

最好就是设置 no-cache ,平时返回 304 Not Modified 。主动设置浏览器 cache 的本质,就是一定时间内免网络流量。
296727
2023-06-30 17:46:35 +08:00
@junkk 有地方设置的,可能没设置正确
296727
2023-06-30 17:47:20 +08:00
@tool2d etag 和 Last-Modified 就是这个 304
296727
2023-06-30 17:49:39 +08:00
tool2d
2023-06-30 18:13:17 +08:00
@296727 etag 和 Expires 只能二选一,服务器默认对图片都是用 Expires 策略,Expires 的时间没到之前,这时候 etag 是不生效的,除非你主动关闭缓存。
netnr
2023-06-30 19:00:02 +08:00
用户表存头像链接 uuid.jpg
更新头像时 更新头像字段为 uuid.jpg?202306300700
chenluo0429
2023-06-30 21:51:11 +08:00
建议好好学习一下浏览器的缓存机制,随手按照别人的回答加了几个 header 或许能一定程度实现你的需求,但是说不准就埋下更多的坑
test005
2023-07-01 10:03:24 +08:00
upload oss
http://domain.oss/hash.jpg


get http://localhost/user/{id}/avatar
response 302 http://domain.oss/hash.jpg
yinmin
2023-07-01 20:31:57 +08:00
鱼与熊掌兼得的方式是加一个 count 字段,用户每次更改头像 count 加 1 ,然后使用 url: https://domain.com/user/{id}/{count}/avatar
296727
2023-07-03 09:11:34 +08:00
@tool2d 自己去写 demo 试一试,别在这靠自己臆想

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/953038

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX