1. 首页
  2. css

CSS内联SVG…缓存

我写道,使用内联图标是最好的图标系统。我仍然认为那是真的。这是将图标放到页面上最简单的方法。没有网络请求,完全可以设置样式。
但是内联代码有一些缺点,其中之一就是它没有利用缓存。你让浏览器在浏览时一遍又一遍地阅读和处理相同的代码。没什么大不了的。还有更大的鱼要炒,对吗?但考虑更有效的模式仍然很有趣。
斯科特•杰尔写道,仅仅因为你内联了一些东西并不意味着你不能缓存它。让我们看看斯科特的想法是否可以扩展到SVG图标。从内联SVG开始像这样…
It\”s weirdly easy to toss text into browser cache as a file
In the above HTML, the selector .icon-alarm将为该图标获取整个SVG块。
const>
Then we can plunk it into the browser\”s cache like this:
if (\”caches\” in window) {caches.open(\”static\”).then(function(cache) {cache.put(\”/icons/icon-wheelchair.svg\”, new Response(iconHTML,{ headers: {\”Content-Type\”: \”image/svg+xml\”} }));}}
查看文件路径/icons/icon-wheelchair.svg?那是瞎编的。但它确实会被放在那个位置的缓存中。让我们确保浏览器在请求文件时从缓存中获取该文件
我们将在页面上注册一个服务工作者:
if (navigator.serviceWorker) {navigator.serviceWorker.register(\”/sw.js\”, {scope: \”/\”});}
服务工作者本身将非常小,只是一个缓存匹配器:
self.addEventListener(\”fetch\”, =>But… we never request that file, because our icons are inline.
True. But what if other pages benefitted from that cache? For example, an SVG icon could be placed on the page like this:

Since /icons/icon-alarm.svg在缓存中准备就绪,浏览器会很高兴地将其从缓存中取出并显示出来。Edge不喜欢链接到文件的元素,但这很快就会结束。更新,它结束了,边缘消失了。)
即使文件不在缓存中,假设我们真的在文件系统上丢弃了这个文件可能是某种\”包含\”的结果(我在演示中使用了nunjuks)。但是…和内联svg并不完全相同。我喜欢上面的内容是,它利用了缓存,图标应该立即呈现接近。还有一些事情你可以用这种方式来设计——例如,在父图标上设置填充应该经过创建的阴影DOM,并对其中的SVG元素着色。
但是,这是不一样的。与内联SVG相比,阴影DOM是一个很大的障碍。
所以,增强它们!我们可以异步加载一个脚本,找到每个SVG图标,找到它需要的SVG,并替换的东西…
const => {const => = = newEl.parentNode;while (newEl.firstChild) parent.insertBefore(newEl.firstChild, newEl);parent.removeChild(newEl);});});
现在,假设这个JavaScript执行正确,这个页面有内联SVG可用,就像原来的页面一样。

CSS内联SVG…缓存 为WP2原创文章,链接:https://www.wp2.cn/css/css%e5%86%85%e8%81%94svg%e7%bc%93%e5%ad%98/