但是,许多文章建议(不解释细节)虽然我们使用内联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.但我仍然需要一些指导线来开始实现理想的解决方案.
有人能给我一些光吗？
–
–
–
编号：Caching SVG Sprite in localStorage
参考：Inline SVG and caching
参考：SVG ON THE WEB
参考：Do Inline SVGs Weigh Down Websites?
解决方法
现在,通过“内联”您的SVG,您将它们作为HTML文档的一部分 – 它们不再是外部资源,可以单独检查它们是否可以从缓存中获取或需要重新加载.
因此,如果您有三个HTML文档都具有内联的相同SVG图像,则图像的代码将被加载三次 – 因为它是三个HTML文档的一部分.
然而,如果图像作为外部资源(如img,background-image,object,…)嵌入,则只会在浏览器加载的三个HTML页面中的第一个上加载一次.在其他页面上,它会识别出,“嘿,具有此特定URL的外部资源已经在我的缓存中 – 无需再次加载它.”