直接选择元素或先选择其父元素哪个更快？

Question

这是我的DOM树：

给出选项：

1. d3.select("body").select("svg").selectAll(".circle_g")
2. d3.select("body").selectAll(".circle_g")

您知道哪个更快吗？

Answer 1

根据经验，选择的内容越多，代码的性能就越差。

因此，如果目标元素（类circle_g）是该类中的 only 个元素，则最好的选择就是这样做：

d3.selectAll(".circle_g")

添加的选择越多，代码的速度就越慢。因此，这将需要更长的时间才能运行：

d3.select("body").selectAll(".circle_g")

最后，这是最糟糕的选择：

d3.select("body").select("svg").selectAll(".circle_g")

此JSPerf清楚地表明了性能上的差异。我的机器上的值是（大约）：

• d3.selectAll(".circle_g")：最快的选择。
• d3.select("body").selectAll(".circle_g")：慢11％。
• d3.select("body").select("svg").selectAll(".circle_g")：慢20％。

值得一提的是，使用CSS空间选择器，就像这样...

d3.selectAll("body svg .circle_g")

...比上面的第三个选项具有更高的性能，但仍然比第一个选项低（约慢6％）。

简而言之，不要选择父母，这不仅无用，而且会降低性能。直接进入目标：d3.selectAll(whatever)。

编辑

您的comment帮助您了解具体情况，

因此，在非常特殊的情况下...

1. 您在DOM中拥有大量元素
2. 您的目标元素都在相同父级
中

...首先选择父级会稍快一些，因为您不必在所有DOM中搜索目标元素。因此，在特定情况下，这是

d3.select(parent).selectAll(target)

比这快：

d3.select(target)

请查看此JSPerf，以在不太拥挤的HTML中查看一些值。根据具体情况，页面中包含的元素越多，差异就越大。

最后，值得一提的是，在生产代码中这通常并不重要，因为D3程序员通常（或者我应该说吗？）在selectAll之前使用父级的选择。像这样：

const svg = d3.select("svg")
const circles = svg.selectAll(".circle_g")
//parent here----^