我们如何在浏览器中缓存内联SVG？ [英] How can we cache inline SVG in Browsers?

问题描述

SVG由于其可扩展性已经存在多年，并且很久以来就熟悉内联SVG的好处是可以使用CSS和JS来操纵它，并且当我们想通过html文档重复相同的SVG时，那么我们可以使用< use> 标签来引用原始元素。另外，内联SVG也可以减少HTTP请求的数量。然而，许多文章都提出（没有解释细节），尽管我们使用内联SVG来保存HTTP请求，它不再可以被浏览器作为单独的主题缓存，这意味着它不能跨页面重用。

当我碰巧在一个项目中使用内联SVG时，我想知道在使用带有< img> < img>标签的<或时，内联SVG（w3c推荐的着名html5元素） code> background-image 是可缓存的。

如果DOM可缓存，那么为什么不能使用SVG DOM？
（建立在DOM Level 2之上并与之兼容。参考： https：/ /www.w3.org/TR/SVG/svgdom.html ）

到目前为止，我提出缓存的解决方案是使用数据URI方案
（另请参阅：在数据uris中优化svgs ）
但是这样做会失去处理CSS和JS的能力样式和操作。

Web上的一些示例提示使用JS加载可缓存资源或者替换占位符元素，例如< object> ; 标记，以及使用localStorage， CacheStorage 和服务人员。但我仍然需要一些指导方针才能开始实现理想的解决方案。

请问有人能给我点亮吗？

-

-

< - > -

p> Ref：在localStorage中缓存SVG Sprite

参考：内联SVG和缓存

Ref： SVG on the WEB

参考：内联SVG是否称重网站基本的HTTP缓存是基于URL的，它是全部或全部 - 你可以指示客户端要么从缓存中获取整个资源，要么完全重新加载它。

现在，通过内联您的SVG，您使它们成为HTML文档的一部分 - 它们不再是外部资源，可以单独检查它们是否可以从缓存中取出或需要重新加载。

因此，如果您有三个HTML文档都内嵌相同的SVG图像，则图像的代码将被加载三次 - 因为它是三个HTML文档的一部分。

如果图像是作为外部资源嵌入的（如img，background-image，object，...），它将只加载一次，在这三个HTML页面中的第一个浏览器负载。在其他页面上，它会识别出嘿，具有此特定网址的外部资源已经存在于我的缓存中 - 无需再次加载它。

SVGs have been around for years due to its scalability and it is long-familiar that the benefit of inline SVG is one can manipulate it with CSS and JS, and when we want to repeat the same SVG over a html document, then we can use the <use> tag to reference the original element. Furthermore, inline SVGs could also reduce the number of HTTP requests.

However, many articles suggest (without explaining the details) that while we use inline SVG to save HTTP request, it is no longer cacheable by a browser as a separate subject, which means it is not reusable across the pages.

As I happen to use inline SVGs extensively for a project, I would like to know exactly how inline SVG (the renowned html5 element, which is a w3c recommendation) can be cached in browsers whilst using SVGs with <img> tag or background-image are cacheable.

If DOM is cacheable, then why can't the SVG DOM ? (which builds upon and is compatible with DOM Level 2. Ref: https://www.w3.org/TR/SVG/svgdom.html)

So far, the solution I came up with cachebility is to use Data URI scheme (Also Ref: Optimizing svgs in data uris ) But by doing so, it loses the ability to deal with CSS and JS for styling and manipulation.

A few examples around the web suggest the use of JS to load cacheable resource or by replacing placeholder elements such as <object> tag, as well as using localStorage, CacheStorage and Service Worker. But I still need some guide lines to get started to achieve an ideal solution.

Could someone shed me some light please?

-

-

-

Ref: Caching SVG Sprite in localStorage

Ref: Inline SVG and caching

Ref: SVG ON THE WEB

Ref: Do Inline SVGs Weigh Down Websites?

解决方案

Basic HTTP caching works based on URLs, and it is "all or nothing" - you can instruct the client to either take the whole resource from cache, or to reload it completely.

Now, by "inlining" your SVGs, you are making them part of the HTML document - they are not external resources any more, that could individually be checked for whether they can be taken from cache or need to be reloaded.

So, if you have three HTML documents that all have the same SVG image inlined, the code of the image will be loaded three times - because it is part of the three HTML documents.

Whereas, if the image was embedded as an external resource (as img, background-image, object, …), it would be loaded only once, on the first of those three HTML pages the browser loads. On the other pages, it will recognize, "hey, that external resource with this particular URL is in my cache already - no need to load it again."

这篇关于我们如何在浏览器中缓存内联SVG？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！