V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
coolair
V2EX  ›  问与答

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

  •  
  •   coolair · 2023-06-30 16:01:54 +08:00 · 1264 次点击
    这是一个创建于 519 天前的主题,其中的信息可能已经有所发展或是发生改变。
    比如,获取头像的地址是这样的 http://localhost/user/{id}/avatar

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

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

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

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

    最好就是设置 no-cache ,平时返回 304 Not Modified 。主动设置浏览器 cache 的本质,就是一定时间内免网络流量。
    296727
        12
    296727  
       2023-06-30 17:46:35 +08:00
    @junkk 有地方设置的,可能没设置正确
    296727
        13
    296727  
       2023-06-30 17:47:20 +08:00
    @tool2d etag 和 Last-Modified 就是这个 304
    tool2d
        15
    tool2d  
       2023-06-30 18:13:17 +08:00
    @296727 etag 和 Expires 只能二选一,服务器默认对图片都是用 Expires 策略,Expires 的时间没到之前,这时候 etag 是不生效的,除非你主动关闭缓存。
    netnr
        16
    netnr  
       2023-06-30 19:00:02 +08:00 via Android
    用户表存头像链接 uuid.jpg
    更新头像时 更新头像字段为 uuid.jpg?202306300700
    chenluo0429
        17
    chenluo0429  
       2023-06-30 21:51:11 +08:00 via Android
    建议好好学习一下浏览器的缓存机制,随手按照别人的回答加了几个 header 或许能一定程度实现你的需求,但是说不准就埋下更多的坑
    test005
        18
    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
        19
    yinmin  
       2023-07-01 20:31:57 +08:00 via iPhone
    鱼与熊掌兼得的方式是加一个 count 字段,用户每次更改头像 count 加 1 ,然后使用 url: https://domain.com/user/{id}/{count}/avatar
    296727
        20
    296727  
       2023-07-03 09:11:34 +08:00
    @tool2d 自己去写 demo 试一试,别在这靠自己臆想
    tool2d
        21
    tool2d  
       2023-07-03 10:15:15 +08:00
    @296727 就是一个 F12 的事情。

    Expires 在没到期之前,浏览器不会发送网络请求。network 面板是空的,哪里来的 etag?
    296727
        22
    296727  
       2023-07-03 10:31:17 +08:00
    @tool2d 开心就好,而且 OP 说的是这个问题吗?我说的是解决这个问题,你在说什么,脑子瓦特了就去看医生,看不了医生了就自己 Google ,或者问 chatgpt 。让你自己写 demo ,你写了吗? etag 和 Expires 共存的情况下,到底是不会请求,还是返回 304 ,自己去看看不可以吗? https://imgur.com/a/DxHxO6w
    296727
        23
    296727  
       2023-07-03 10:33:42 +08:00
    @tool2d 对不起,我瓦特了
    tool2d
        24
    tool2d  
       2023-07-03 10:35:58 +08:00
    @296727 如果在浏览器里的地址栏输入后回车,那么 cache-control 是不生效的。这是特殊情况。

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

    这不是我自己发明的,是 cache-control 就是这样规定的。
    296727
        25
    296727  
       2023-07-03 10:46:08 +08:00
    @tool2d 所以我说我瓦特了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   972 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 20:15 · PVG 04:15 · LAX 12:15 · JFK 15:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.