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

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

  •  
  •   coolair · 302 天前 · 1083 次点击
    这是一个创建于 302 天前的主题,其中的信息可能已经有所发展或是发生改变。
    比如,获取头像的地址是这样的 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  
       302 天前 via Android
    肯定会啊...query 变化了浏览器就不缓了...
    bjzhush
        2
    bjzhush  
       302 天前
    你这个时间戳参数加的莫名其妙的,可以说一下你为什么这么加
    至于缓存,可以去看看浏览器的 etag last modified 等关于缓存控制的相关内容
    如果你是想定时刷新,还有一种办法是可以通过参数控制周期,那就是把你刚刚的时间戳换成 ymd ,那么每天刷新一次,换成 ym ,那么每月刷新一次,不过常见的做法还是通过 Nginx 的一些 header 参数来控制缓存
    x86
        3
    x86  
       302 天前
    服务器:顶住了,这把高端局
    ShundL
        4
    ShundL  
       302 天前
    难道你上传的头像原始地址是固定的吗?
    ShundL
        5
    ShundL  
       302 天前
    @ShundL #3 不好意思,理解错了,请无视
    coolair
        6
    coolair  
    OP
       302 天前 via Android
    @bjzhush 主要是链接固定,用户修改自己的头像后,页面上原有的图片不会更新。
    296727
        7
    296727  
       302 天前
    用 etag 不需要管这些,或者直接用 oss ,不需要你来操心
    bjzhush
        8
    bjzhush  
       302 天前
    @coolair 那你可以在 user 表加一个 avatar 字段,用于存储用户的头像地址,这属于设计上的问题,没有必要增加本来不需要的技术复杂度,你自己注册几个网站,然后去换下头像,看看用户头像地址是怎么设计的,更换之后是怎么变化的
    NoOneNoBody
        9
    NoOneNoBody  
       302 天前
    加时间戳本来就是为了抗缓存的,例如股票实时价格,当然股票这种也不会用静态图片
    时间戳可以按变化频率定,太细自然是每次请求都重新下载,例如下个月就自动变换的图片,时间戳就细化到月份
    junkk
        10
    junkk  
       302 天前
    @296727 #7 oss 才需要关心这个问题吧,上家公司上的 oss ,缓存严重,更换同名文件后不会变化内容,必须更新时间戳
    tool2d
        11
    tool2d  
       302 天前
    @296727 如果 jpg 头像 url 地址不变,在缓存时间之内,浏览器根本就不会发送新请求,更别提 etag 了。

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


    get http://localhost/user/{id}/avatar
    response 302 http://domain.oss/hash.jpg
    yinmin
        19
    yinmin  
       301 天前 via iPhone
    鱼与熊掌兼得的方式是加一个 count 字段,用户每次更改头像 count 加 1 ,然后使用 url: https://domain.com/user/{id}/{count}/avatar
    296727
        20
    296727  
       299 天前
    @tool2d 自己去写 demo 试一试,别在这靠自己臆想
    tool2d
        21
    tool2d  
       299 天前
    @296727 就是一个 F12 的事情。

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

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

    这不是我自己发明的,是 cache-control 就是这样规定的。
    296727
        25
    296727  
       299 天前
    @tool2d 所以我说我瓦特了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   892 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 21:22 · PVG 05:22 · LAX 14:22 · JFK 17:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.