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

有关 CSS 网站变黑白是如何做到实时的?

  •  
  •   CSGO · 2022-12-02 14:17:07 +08:00 · 2144 次点击
    这是一个创建于 704 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我也试着把网页变黑白,结果发现自己刷新是不会变黑白,可能需要把浏览器缓存都删除才可以。
    那例如很多网站的黑白,为啥就可以在我访问的时候被“强制”用上了新的 css ?

    是和用的 cf 的 ttl 缓存时间有关系吗?这个缓存时间表示比如设置 1 天,cf 就会每天都会重新下载一遍我服务器上的文件?
    13 条回复    2022-12-02 17:51:44 +08:00
    Mosugar
        1
    Mosugar  
       2022-12-02 14:19:22 +08:00
    Google 一下 大把源码
    ztxcccc
        2
    ztxcccc  
       2022-12-02 14:19:58 +08:00   ❤️ 2
    css 文件名里有 hash 标识
    html 被更新以后访问的 css 文件从类似于 index.123.css 变成了 index.456.css ,强制你去获取新文件
    Kenmin
        3
    Kenmin  
       2022-12-02 14:25:50 +08:00
    二楼正解
    CSGO
        4
    CSGO  
    OP
       2022-12-02 14:33:22 +08:00
    @ztxcccc
    @Kenmin 我应该搜索什么可以获取相关知识?找了 css hash 没看到相关内容。
    Kenmin
        5
    Kenmin  
       2022-12-02 14:40:58 +08:00   ❤️ 1
    @CSGO 一般是通过 Webpack 打包自动生成的,这里有相关配置文档 https://webpack.js.org/guides/caching/
    chniccs
        6
    chniccs  
       2022-12-02 14:41:59 +08:00
    @CSGO #4 网页黑白
    christin
        7
    christin  
       2022-12-02 14:44:50 +08:00 via iPhone
    你是用什么打包工具打的呢? webpack 和 vute 配置的地方不一样
    CSGO
        8
    CSGO  
    OP
       2022-12-02 14:49:35 +08:00
    懂了,我纯静态。
    Doraismydora
        9
    Doraismydora  
       2022-12-02 15:11:12 +08:00
    可以在 css 引用后头加上?timestamp=
    这个是很久之前我学前端的时候看到的方法
    daozun
        10
    daozun  
       2022-12-02 17:40:42 +08:00
    如果使用 nginx 的话,可以加上
    expires 0;
    add_header Cache-Control no-cache;
    强制更新
    ie88
        11
    ie88  
       2022-12-02 17:49:30 +08:00
    看起来楼主不太懂 web 前端,你查看页面源码,看看 css 文件的后缀就知道了,通常用 webpack 和 vite 打包出来的 js css 文件是带 hash 的
    tool2d
        12
    tool2d  
       2022-12-02 17:50:11 +08:00   ❤️ 1
    @daozun 强制更新也只能等上一次 css 资源过期后才生效,要不然连客户端查询请求都不会发起。

    一般来说,都是 html 可以设置 no-cache, 而 js/css 都是需要一定缓存的。
    ie88
        13
    ie88  
       2022-12-02 17:51:44 +08:00
    @ie88 文件名不同,因此浏览器没有缓存,所以服务器返回新的 css js 文件,页面就重新渲染了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3095 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 13:57 · PVG 21:57 · LAX 05:57 · JFK 08:57
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.