html - 如何缓存内联 base64 数据 uri(图像)?

标签 html css image performance caching

我使用直接内嵌在 HTML 页面内的数据 uri base64 编码图像作为背景图像。 我到处都读到,与未编码的图像相反,它们没有存储在缓存中,这有时确实是一个性能问题。

但是当查看我的 chrome 开发工具时,我看到“缓存在内存中”...

enter image description here

是否缓存了内联 html base64 图像?

如果是:我的问题是:我最初检查它是因为我想分析加载 base64 内联图像的时间。所以我现在无法在第一次下载/访问时看到解码和加载它所花费的时间?我尝试清除我的浏览器历史记录,但与其他缓存(如图像等标准 Assets )相反,它仍然存在,也就是说,即使我清除了我的浏览器历史记录/缓存,下次我加载它时,它仍然是用 chrome dev 编写的0ms/“来自内存缓存”的工具:我如何清除它以查看首次访问者会发生什么情况?

注意:当然在 chrome 开发工具中选择了“禁用缓存”。 另外,我不确定它是否重要,但这是 base64 和 html 代码(它非常小:不到 900 字节)

<div style="background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wAARCAAKAB4DAREAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABQYE/8QAJBAAAgEEAQMFAQAAAAAAAAAAAQIDAAQREgUTITEyQUJRcZL/xAAWAQEBAQAAAAAAAAAAAAAAAAAEAgP/xAAdEQACAgIDAQAAAAAAAAAAAAAAAQIDESEEInEx/9oADAMBAAIRAxEAPwCOtrYGJmdY36iEIerqUOR3I9/yqRJssYAk2jakg47HIpUFoNYygsZY7PmYmcqge2dYiQMb/Xfxmj8pPRvxWt5Bb6BYbyUB9hIRJqRgrnPmpqei7liQInmqiRIWsPUKVENIT5FQZeJJbUfId/SUW5934IpXReg7Mz8ldFyWJkfJJz8qx+JG7WWz/9k=');" ><a href="/home">

最佳答案

当我重复您的测试时,Chrome 会发出两个请求。第一个获取 HTML 页面,是一个正常的请求。第二个获取图像并从内存中获取。这是有道理的,因为图像包含在嵌入 HTML 本身的第一个请求中。

换句话说,内联图像不会被缓存,除非它们所在的页面被缓存。

关于html - 如何缓存内联 base64 数据 uri(图像)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43364525/

相关文章:

image - 从RGB到YCbCr的转换公式

PHP:双引号不显示在输入值中,但显示在正常回显中

javascript - 使用 1 个按钮获取 2 个 Canvas 图像

html - 两个三 Angular 形拼成一个长方形

html - Mat-tab 内的组件 : How to scroll inner component

html - 为什么 Safari 有时只渲染图像的顶部?

image - OpenCV图像指针无法按预期工作

html - 使用 Express 在 node.js 中的数组中接收表单数据?

javascript - 我的动画功能正在播放

javascript - Typescript 中的 Intersection Observer 在 useRef 中抛出错误