kol*_*nar 7 html javascript css html5 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上并与之兼容.参考:https://www.w3.org/TR/SVG/svgdom.html)
到目前为止,我提出的可缓存性的解决方案是使用数据URI方案 (也参考:在数据uris中优化svgs)但是这样做,它失去了处理CSS和JS的样式和操作的能力.
Web上的一些示例建议使用JS来加载可缓存资源,或者替换占位符元素(如<object>tag),以及使用localStorage,CacheStorage和Service Worker.但我仍然需要一些指导方针来开始实现理想的解决方案.
有人能给我一些光吗？
-
-
-
参考:内联SVG和缓存
参考:网上的SVG
参考:内联SVG重量减少网站？
CBr*_*roe 17
基本的HTTP缓存基于URL工作,它是"全有或全无" - 您可以指示客户端从缓存中获取整个资源,或者完全重新加载它.
现在,通过"内联"您的SVG,您将它们作为HTML文档的一部分 - 它们不再是外部资源,可以单独检查它们是否可以从缓存中获取或需要重新加载.
因此,如果您有三个HTML文档都具有内联的相同SVG图像,则图像的代码将被加载三次 - 因为它是三个HTML文档的一部分.
然而,如果图像作为外部资源(如img,background-image,object,...)嵌入,则只会在浏览器加载的三个HTML页面中的第一个上加载一次.在其他页面上,它会识别出,"嘿,具有此特定URL的外部资源已经在我的缓存中 - 无需再次加载它."