performance - 隐藏屏幕 SVG 元素

Question

我正在使用 D3 渲染数百个 svg 元素。但是，它们中只有少数同时在视口中可见。

所以我想可能我可以通过删除那些不在屏幕上的元素并在它们滚动回视图时重新创建它们来提高性能。

这是一个合理的假设吗？

有没有可用的工具来做这样的事情？

Answer 1

如果您只是担心它们是不可见的，则可以将不需要的元素实例化到元素的范围之外，然后transform("translate(x, y)")在需要时将它们放入视图中。

如果您在需要它们之前不希望它们存在，请将它们的属性（包括初始位置和您需要的任何其他内容）存储在对象数组中，并在屏幕上将它们实例化为初始位置。这将提供更好的性能优势。

Answer 2

更一般地说，看看defs和use元素或组重用。例如，您可能会生成对象“池”并应用平移以将它们定位在视口内部或外部。

Answer 3

您可以将display属性设置none为您想要隐藏的任何 SVG 元素。

document.getElementById("unwanted").style.display = `none`;

<svg>
    <circle id="wanted" cx="50" cy="50" r="50" fill="red"/>
    <circle id="unwanted" cx="100" cy="100" r="100"/>
</svg>