我有一些通过React.createElement动态呈现内容的react 代码.因此,CSS是通过对象应用的.该动态生成中的元素可以具有指向公共AWS S3存储桶的背景图像.

似乎每次我的组件重新渲染时,都会再次从S3获取背景图像.这会延迟页面呈现.我在所有对象上设置了用于缓存控制的S3元数据.以下是背景图像加载的请求和响应标头-

响应标头-

Accept-Ranges: bytes
Cache-Control: public, max-age=604800
Content-Length: 52532
Content-Type: application/octet-stream
Date: Sun, 06 Feb 2022 05:57:32 GMT
ETag: "f29655808a5f80627d9ea7f44058a5e3"
Last-Modified: Sun, 06 Feb 2022 05:55:10 GMT
Server: AmazonS3
x-amz-meta-filetype: IMAGE

请求头-

Accept: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,hi;q=0.8
Cache-Control: no-cache
Connection: keep-alive
Host:  <bucket-name>s3.amazonaws.com
Pragma: no-cache
Referer: https://<my-domain>.com/
sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="97", "Chromium";v="97"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Linux"
Sec-Fetch-Dest: image
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36

我可以在"网络"选项卡中看到图像被多次加载,并且每次都显示数据传输.我做错了什么?有人能帮我找到根本原因吗.谢谢

推荐答案

会不会是在开发工具的网络选项卡中 Select 了忘记的"禁用缓存"选项?因为服务器似乎使用正确类型的缓存头进行响应.

Css相关问答推荐

在react native中应用阴影

隐藏div后缺少div的InnerHTML

单独.css文件中的样式不适用于Angular 元件

设置ScaleImageButton的样式

当鼠标移到侧边栏之外时,如何防止shiny 仪表板侧边栏菜单中的 pickerInput 选项被切断?

在网格中整齐地对齐项目

具有共享的自动调整列宽的多个 CSS 网格

如何在启动时滚动 div 的底部?

Bootstrap 5 - 更改列顺序时出现问题

没有 colored颜色 Select 器的 JavaFX colored颜色 Select 器

Ant Design:将位置子菜单移动到屏幕顶部

更改组件中 css 的值

CSS如何防止键盘向上移动内容?

修复导航栏隐藏页面内容

为什么我们将