我们如何在浏览器中缓存嵌入式SVG?

科鲁纳尔

SVG由于其可伸缩性已经存在了很多年,众所周知,内联SVG的好处是可以使用CSS和JS对其进行操作,并且当我们想在html文档上重复相同的SVG时,可以使用<use>引用原始元素标签。此外,内联SVG还可以减少HTTP请求的数量。

但是,许多文章建议(无需详细说明),尽管我们使用内联SVG保存HTTP请求,但浏览器无法再将它作为单独的主题进行缓存,这意味着它无法在页面上重复使用。

当我碰巧在项目中广泛使用嵌入式SVG时,我想确切地知道嵌入式SVG(著名的html5元素,这是w3c的建议)如何在使用带有<img>标签的SVG可缓存时在浏览器中background-image进行缓存。

如果DOM是可缓存的,那么SVG DOM为什么不能?(它建立在DOM Level 2之上并与之兼容。Ref:https : //www.w3.org/TR/SVG/svgdom.html

到目前为止,我想出的可缓存性解决方案是使用Data URI方案(另请参见:在数据uris中优化svgs),但是这样做会失去处理CSS和JS的样式和操作能力。

网络上的一些示例建议使用JS加载可缓存资源或通过替换占位符元素(例如<object>标记),以及使用localStorage,CacheStorageService Worker但是我仍然需要一些指导方针来开始实现理想的解决方案。

有人可以给我一些启示吗?

--

--

--

参考:在localStorage中缓存SVG Sprite

参考:内联SVG和缓存

参考:Web上的SVG

参考:内联SVG是否会权衡网站?

克劳

基本的HTTP缓存基于URL进行工作,它是“全有还是全无”-您可以指示客户端从缓存中获取整个资源,或者完全重新加载它。

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

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

而如果图像是作为外部资源嵌入的(例如img,背景图像,对象等),则将仅在浏览器加载的这三个HTML页面中的第一个加载一次。在其他页面上,它将识别出“嘿,具有该特定URL的外部资源已经在我的缓存中-无需再次加载。”

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

我们如何在所有浏览器中控制网页缓存?

如何在Google Chrome浏览器的嵌入式Javascript中设置断点?

SVG嵌入式图像仅在浏览器中显示

我们如何在Web浏览器控件中呈现mathjax方程?

Google Chrome浏览器会缓存呈现的SVG吗?如果不是,我们应该如何针对SVG优化SVG?

如何从嵌入式pdf与浏览器进行通信

嵌入式浏览器中对Google的OAuth请求

我们如何计算嵌入式C中以下for循环给定的延迟?

我想在React中的网页中使用嵌入式浏览器

嵌入式 IE 浏览器:如何在导航完成前检测重定向?

如何在浏览器中修复“我们无法到达此页面”错误或“ err_connection_timed_out”?

如何在移动浏览器的嵌入式Vimeo播放器上显示全屏按钮?

我们如何在robotframework中一次通过不同的浏览器

我们如何在Web浏览器中使用AWS Kinesis?

我们如何在 Squish Tool 中使用 BDD 执行跨浏览器测试

带有嵌入式脚本的SVG,可扩展到浏览器的可用空间

如何在Meteor中循环浏览嵌入式文档

我们如何操纵浏览器表单中的元素值?

如何在SVG中制作嵌入式投影

我们应该如何解释带有嵌入式逗号的宏

如何通过 javascript 在 c# 中首次播放嵌入式 YouTube(使用 Gecko 浏览器)?

为什么我们在嵌入式系统中内存有限?

我们可以使用javascript将图像推送到浏览器缓存吗

跨浏览器嵌入式视频灰度滤镜

JSF创建嵌套的嵌入式浏览器

如何设置Silverlight浏览器应用程序与嵌入式Web浏览器控件之间的通信

如何在Rails 4和Nginx中执行杠杆式浏览器缓存?

如何为Chromium嵌入式浏览器的不同实例设置不同的Cookie

在Excel Javascript API中创建嵌入式Web浏览器或iframe