我的浏览器是否会缓存数据URL中的收藏夹图标

Question

我想使用下面的base64收藏图标，也许还有一些base64图片。

<link href="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAEAAAAAAAAAAAAAAAEAAAAAAA..AMAK3WxwAOWT0AK4RgAKHOvQA4hWUAP4lqAD2MagBQm3kATKSBAECcdP//AAD8/wAA+H8AAPA/AADwPwAA4B8AAMAPAACABwAAAgMAAI8BAADfgAAA/8AAAP/AAAD/4QAA//MAAP//AAA=" rel="icon" type="image/x-icon" />

这些会被我的浏览器缓存吗？

Answer 1

不是的。数据URI不会与其包含的文档(例如CSS或HTML文件)分开缓存，因此每次重新下载包含文档时都会下载数据。

Source

Answer 2

实际上，建议将Caching your site's favicon作为提高网站速度的最佳性能实践。

例如，谷歌不会浪费额外的宝贵字节在其主页的源代码中包含一个收藏图标(无论是使用<link />还是数据URI)。

取而代之的是，它们为their favicon设置了一个超文本传输协议报头，直到将来。Cache-Control: private, max-age=31536000 (31,536,000秒= 365天)。

如果你有兴趣控制你的站点收藏夹图标的“新鲜度”，你可以使用Cache-Control和HTTP头-例如，如果你计划改变收藏夹图标或者不希望它被缓存，你可以相应地调整它。

使用Apache and mod_expires的示例

<IfModule mod_expires.c>
    # Add Expires Header
    # http://www.askapache.com/?p=152

    ExpiresActive On
    ExpiresByType image/x-icon "access plus 1 month"
</IfModule>

此模块控制服务器响应中的Expires HTTP标头和Cache-Control HTTP标头的max-age指令的设置。过期日期可以设置为相对于上次修改源文件的时间，或相对于客户端访问的时间。