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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 722 天前的主题，其中的信息可能已经有所发展或是发生改变。

我也试着把网页变黑白，结果发现自己刷新是不会变黑白，可能需要把浏览器缓存都删除才可以。
那例如很多网站的黑白，为啥就可以在我访问的时候被“强制”用上了新的 css ？

是和用的 cf 的 ttl 缓存时间有关系吗？这个缓存时间表示比如设置 1 天，cf 就会每天都会重新下载一遍我服务器上的文件？

缓存

黑白

CSS

TTL

13 条回复 • 2022-12-02 17:51:44 +08:00

Mosugar

2022-12-02 14:19:22 +08:00

Google 一下大把源码

ztxcccc

2022-12-02 14:19:58 +08:00

css 文件名里有 hash 标识
html 被更新以后访问的 css 文件从类似于 index.123.css 变成了 index.456.css ，强制你去获取新文件

Kenmin

2022-12-02 14:25:50 +08:00

二楼正解

CSGO

2022-12-02 14:33:22 +08:00

@ztxcccc
@Kenmin 我应该搜索什么可以获取相关知识？找了 css hash 没看到相关内容。

Kenmin

2022-12-02 14:40:58 +08:00

@CSGO 一般是通过 Webpack 打包自动生成的，这里有相关配置文档 https://webpack.js.org/guides/caching/

chniccs

2022-12-02 14:41:59 +08:00

@CSGO #4 网页黑白

christin

2022-12-02 14:44:50 +08:00 via iPhone

你是用什么打包工具打的呢？ webpack 和 vute 配置的地方不一样

CSGO

2022-12-02 14:49:35 +08:00

懂了，我纯静态。

Doraismydora

2022-12-02 15:11:12 +08:00

可以在 css 引用后头加上?timestamp=
这个是很久之前我学前端的时候看到的方法

daozun

2022-12-02 17:40:42 +08:00

如果使用 nginx 的话，可以加上
expires 0;
add_header Cache-Control no-cache;
强制更新

ie88

2022-12-02 17:49:30 +08:00

看起来楼主不太懂 web 前端，你查看页面源码，看看 css 文件的后缀就知道了，通常用 webpack 和 vite 打包出来的 js css 文件是带 hash 的

tool2d

2022-12-02 17:50:11 +08:00

@daozun 强制更新也只能等上一次 css 资源过期后才生效，要不然连客户端查询请求都不会发起。

一般来说，都是 html 可以设置 no-cache, 而 js/css 都是需要一定缓存的。

ie88

2022-12-02 17:51:44 +08:00

@ie88 文件名不同，因此浏览器没有缓存，所以服务器返回新的 css js 文件，页面就重新渲染了