SVG已经存在多年,因为它具有可扩展性,并且长期以来很熟悉内联SVG的好处是可以用CSS和JS操作它,当我们想在html文档上重复相同的SVG时,我们可以使用< use>标记以引用原始元素.此外,内联SVG还可以减少HTTP请求的数量.
但是,许多文章建议(不解释细节)虽然我们使用内联SVG来保存HTTP请求,但它不再可以被浏览器缓存为单独的主题,这意味着它不能跨页面重用.
由于我碰巧在项目中广泛使用内联SVG,我想知道如何在浏览器中缓存内联SVG(着名的html5元素,这是一个w3c推荐),同时使用带有< img>的SVG.标签或背景图像是可缓存的.
如果DOM是可缓存的,那为什么不能使用SVG DOM呢？
(建立在DOM Level 2上并与之兼容.Ref：https://www.w3.org/TR/SVG/svgdom.html)
到目前为止,我提出的可缓存性的解决方案是使用Data URI scheme
(参考号：Optimizing svgs in data uris)
但是通过这样做,它失去了处理CSS和JS以进行样式和操作的能力.
Web上的一些示例建议使用JS来加载可缓存资源,或者替换占位符元素,例如< object>标签,以及使用localStorage,CacheStorage和Service Worker.但我仍然需要一些指导线来开始实现理想的解决方案.
有人能给我一些光吗？
–
–
–
解决方法
基本的HTTP缓存基于URL工作,它是“全有或全无” – 您可以指示客户端从缓存中获取整个资源,或者完全重新加载它.
现在,通过“内联”您的SVG,您将它们作为HTML文档的一部分 – 它们不再是外部资源,可以单独检查它们是否可以从缓存中获取或需要重新加载.
因此,如果您有三个HTML文档都具有内联的相同SVG图像,则图像的代码将被加载三次 – 因为它是三个HTML文档的一部分.
然而,如果图像作为外部资源(如img,background-image,object,…)嵌入,则只会在浏览器加载的三个HTML页面中的第一个上加载一次.在其他页面上,它会识别出,“嘿,具有此特定URL的外部资源已经在我的缓存中 – 无需再次加载它.”
