我应该使用 SVG 作为背景而不是插入 DOM 来提高性能吗？

Question

我的列表中有一些SVG，大约有100个节点。它们看起来像：

<li>
  <div class="icon"><svg><path .... </svg></li></div>
</li>
... another 1000 <li>

我应该把它们变成 CSS 吗？

<li>
  <div class="icon"></li></div>
</li>

.icon {
  width:20px;
  height:20px;
  background-image: url( "data:image/svg+xml,%3Csvg
}

第二种方式会节省一些资源吗，因为 SVG 不在 DOM 树中？

Answer 1

有关性能，请参阅：https://cloudfour.com/thinks/svg-icon-stress-test/

我个人会将其包装在 Web 组件中，以便随时轻松更改它

又快又脏：

<script>
customElements.define("li-svg", class extends HTMLElement {
  connectedCallback(){
    setTimeout( ()=> this.innerHTML = `<li><div class="icon">${this.innerHTML}</li></div>`);
  }
});
</script>

<ul>
  <li-svg>Foo</li-svg>
  <li-svg>Bar</li-svg>
  <li-svg>Boo</li-svg>
</ul>

Answer 2

是的，将 svgs 放入 CSS 中可以提高性能。

我可以想到三个原因：

1. DOM 复杂性正在降低： HTML 文档中的节点数量正在减少。通常较小的 DOM 树会导致更快的渲染。

2. 缓存：CSS文件被浏览器缓存，这将改善后续页面加载。

3. HTTP 请求减少：当您将 svg 作为文件提供时，将会有很多 HTTP 请求。直接在 css 或 html 中提供服务将减少这些额外的请求并缩短页面加载时间。

请记住，如果您使用大量非常复杂的 svgs，您的 css 文件大小将会增加，并且文件的复杂性也会增加。但如果您不经常更改它们，这应该不是问题。

但是，如果您想操作 svgs 或设置其样式，最好将它们用作 HTML 中的内联 SVG。