DOM 中的 SVG 代码直接与 CSS 背景源：对 DOM 遍历的影响答案

【问题标题】：SVG code in DOM directly vs as css background source: effect on DOM traversalDOM 中的 SVG 代码直接与 CSS 背景源：对 DOM 遍历的影响
【发布时间】：2018-04-14 00:36:30
【问题描述】：

免责声明：我进行了搜索，但可以找到该问题的任何事实答案。

我必须在我的 web 应用程序中使用大量 svg 图像。我应该多次直接将 svg 代码转储到 DOM 元素中，还是应该将其用作 css 背景属性并将 css 类应用于这些元素？

背景：我一直想知道增加 dom 长度会对 DOM 遍历产生不利影响，但我确实喜欢使用 css 更改 dom 中 svg 元素的属性，而不是制作新图像。

有没有人做过类似的比较？

【问题讨论】：

您打算如何将 CSS 类应用于 CSS 背景属性？
“CSS 类到 CSS 背景属性”不是我的意思。我在问当我们内联 svg 代码与将其用作 css 背景图像属性时，对 DOM 遍历有什么影响。
内联 SVG 是文档 DOM 的一部分，css background-images 的内容不是。那些背景图片有一个 DOM，你只是无法访问它。
你最后一点的答案是试试看。这很可能取决于浏览器、浏览器版本、操作系统、网络速度和许多其他因素。

标签： html css dom svg dom-traversal

【解决方案1】：

如果 SVG 被用作 background-image，那么您无法设置它的样式。

如果您需要能够在页面中使用 CSS 对其进行动态样式设置，则需要内联它。

【讨论】：

这不是我的问题。我的问题是直接在 DOM 中内联 100 个 SVG 元素与在 CSS 背景属性中使用它的效果是什么？
DOM 中对象数量的任何增加，显然都会在一定程度上减缓 DOM 遍历。但相对于您实际渲染的内容，它通常可以忽略不计。关于它是否会影响您的真正答案是尝试并查看。作为一个纯理论问题，基本上是无解的。