性能使用child.parentNode与getElementById访问父级

Question

我想访问元素的父级。我可以使用child.parentNode访问父级，但是我有父级ID，因此我也可以使用getElementById（）

访问它。

问题是：哪种方式在性能方面更好？为什么更好呢？

Answer 1

因此，我没有猜测这一点，而是决定利用jsPerf创建一些测试用例：

first test case使用非常简单的HTML文档结构：

<div id="parent">
    <div id="child">
    </div>
</div>

然后，它使用child.parentNode和id来测试document.getElementById对document.querySelector的查询。我在Chrome上运行了几次，在Firefox上运行了几次：

如您所见，child.parentNode在以上两种id document选择方法中都是明显的赢家。 querySelector无疑是最慢的-在Firefox中，它比在Chrome中更明显，但在两种情况下显然是最慢的。

second test case运行相同的测试，但是针对稍微复杂一些的文档结构，其中目标<div>嵌套了几层：

<div>
    <h1>Test Code</h1>
    <p>lorem ipsum</p>
    <section>
        <h2>Inner section</h2>
        <p>lorem ipsum lorem ipsum</p>
        <div class="example">
            <h3>Example #1</h3>
        </div>
        <div class="example">
            <div id="parent"> <div id="child"> </div> </div>
        </div>
    </section>
</div>

正如@ maheer-ali指出的那样，我们希望这会进一步增强child.parentNode在其他方法上的性能优势，因为我们正在查询整个文档，但是值得进行实验以验证结果。

令人惊讶的是，与第一次测试的结果并没有很大不同。我们可能会随着文档结构的不断扩大而在某种程度上改变这种情况，但似乎不太可能看到另一个领先者。

我只在两个浏览器上运行过这些测试，只有几次。另外，我在Ubuntu上运行，因此与Windows或MacOS版本（将更为流行）相比，浏览器的实现和性能可能会略有不同。因此，值得您自己使用几种不同的浏览器进行测试，以获得更广泛，更完整的结果集。另外，我会邀请所有对此答案的读者做同样的事情。

一个警告，虽然性能差异可能看起来大不相同，但值得注意的是，结果集以每秒个操作的形式显示，即使在性能最差的情况下，{在Firefox上将{1}}与id配合使用，在一秒钟内大约进行了四次百万个操作。除非计划以极高的频率选择此父节点，否则您极有可能谈论的性能差异可忽略不计。另外，请记住，其中某些结果可能会更改-随着浏览器优先使用querySelector之类的较新方法，我们可能希望看到其性能在这些浏览器的后续版本中有所提高。祝你好运，编码愉快！