时间戳

首页 > 解决方案 > 哪个更快，直接选择元素还是先选择其父元素？

javascript - 哪个更快，直接选择元素还是先选择其父元素？

问题描述

这是我的 DOM 树：

这是我的dom树

鉴于选项：

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

你知道哪个更快吗？

标签： javascriptd3.js

解决方案

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

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

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)。

编辑

您的评论阐明了您的具体情况，谢谢。

因此，在非常具体的情况下...

  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----^

推荐阅读