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

Question

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

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

是否缓存了内联 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">

Answer 1

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

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