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

This topic created in 1055 days ago, the information mentioned may be changed or developed.

比如，获取头像的地址是这样的 http://localhost/user/{id}/avatar

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

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

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

我怕如果每次刷新都全部重新加载的话，会给服务器造成压力。

头像

图片

请求

img

25 replies • 2023-07-03 10:46:08 +08:00

ClarkAbe

Jun 30, 2023 via Android

肯定会啊...query 变化了浏览器就不缓了...

bjzhush

Jun 30, 2023

你这个时间戳参数加的莫名其妙的，可以说一下你为什么这么加
至于缓存，可以去看看浏览器的 etag last modified 等关于缓存控制的相关内容
如果你是想定时刷新，还有一种办法是可以通过参数控制周期，那就是把你刚刚的时间戳换成 ymd ，那么每天刷新一次，换成 ym ，那么每月刷新一次，不过常见的做法还是通过 Nginx 的一些 header 参数来控制缓存

x86

Jun 30, 2023

服务器：顶住了，这把高端局

ShundL

Jun 30, 2023

难道你上传的头像原始地址是固定的吗？

ShundL

Jun 30, 2023

@ShundL #3 不好意思，理解错了，请无视

coolair

Jun 30, 2023 via Android

@bjzhush 主要是链接固定，用户修改自己的头像后，页面上原有的图片不会更新。

296727

Jun 30, 2023

用 etag 不需要管这些，或者直接用 oss ，不需要你来操心

bjzhush

Jun 30, 2023

@coolair 那你可以在 user 表加一个 avatar 字段，用于存储用户的头像地址，这属于设计上的问题，没有必要增加本来不需要的技术复杂度，你自己注册几个网站，然后去换下头像，看看用户头像地址是怎么设计的，更换之后是怎么变化的

NoOneNoBody

Jun 30, 2023

加时间戳本来就是为了抗缓存的，例如股票实时价格，当然股票这种也不会用静态图片
时间戳可以按变化频率定，太细自然是每次请求都重新下载，例如下个月就自动变换的图片，时间戳就细化到月份

junkk

Jun 30, 2023

@296727 #7 oss 才需要关心这个问题吧，上家公司上的 oss ，缓存严重，更换同名文件后不会变化内容，必须更新时间戳

tool2d

Jun 30, 2023

@296727 如果 jpg 头像 url 地址不变，在缓存时间之内，浏览器根本就不会发送新请求，更别提 etag 了。

最好就是设置 no-cache ，平时返回 304 Not Modified 。主动设置浏览器 cache 的本质，就是一定时间内免网络流量。

296727

Jun 30, 2023

@junkk 有地方设置的，可能没设置正确

296727

Jun 30, 2023

@tool2d etag 和 Last-Modified 就是这个 304

296727

Jun 30, 2023

@tool2d https://stackoverflow.com/questions/5321876/which-one-to-use-expire-header-last-modified-header-or-etags

tool2d

Jun 30, 2023

@296727 etag 和 Expires 只能二选一，服务器默认对图片都是用 Expires 策略，Expires 的时间没到之前，这时候 etag 是不生效的，除非你主动关闭缓存。

netnr

Jun 30, 2023 via Android

用户表存头像链接 uuid.jpg
更新头像时更新头像字段为 uuid.jpg?202306300700

chenluo0429

Jun 30, 2023 via Android

建议好好学习一下浏览器的缓存机制，随手按照别人的回答加了几个 header 或许能一定程度实现你的需求，但是说不准就埋下更多的坑

test005

Jul 1, 2023

upload oss
http://domain.oss/hash.jpg

get http://localhost/user/{id}/avatar
response 302 http://domain.oss/hash.jpg

yinmin

Jul 1, 2023 via iPhone

鱼与熊掌兼得的方式是加一个 count 字段，用户每次更改头像 count 加 1 ，然后使用 url： https://domain.com/user/{id}/{count}/avatar

296727

Jul 3, 2023

@tool2d 自己去写 demo 试一试，别在这靠自己臆想

tool2d

Jul 3, 2023

@296727 就是一个 F12 的事情。

Expires 在没到期之前，浏览器不会发送网络请求。network 面板是空的，哪里来的 etag?

296727

Jul 3, 2023

@tool2d 开心就好，而且 OP 说的是这个问题吗？我说的是解决这个问题，你在说什么，脑子瓦特了就去看医生，看不了医生了就自己 Google ，或者问 chatgpt 。让你自己写 demo ，你写了吗？ etag 和 Expires 共存的情况下，到底是不会请求，还是返回 304 ，自己去看看不可以吗？ https://imgur.com/a/DxHxO6w

296727

Jul 3, 2023

@tool2d 对不起，我瓦特了

tool2d

Jul 3, 2023

@296727 如果在浏览器里的地址栏输入后回车，那么 cache-control 是不生效的。这是特殊情况。

一般情况下，你截图里 max-age=1800 就是这个图片的离线周期。在这期间内，浏览器上不会随便发生网络请求。

这不是我自己发明的，是 cache-control 就是这样规定的。

296727

Jul 3, 2023

@tool2d 所以我说我瓦特了