使用JS querySelector的性能

Question

在Web浏览器中使用JavaScript时,以下内容之间存在任何性能差异:

现有的getElementById

document.getElementById("elem");

使用#id查询选择器

document.querySelector("#elem");

使用[id = elem]查询选择器

document.querySelector("[id=elem]");

我假设第一个将是最快的(只需查找具有ID的元素).最后一个看起来像是不好的做法.我喜欢第二个,因为使用querySelector可以使代码易于阅读.

有什么建议？

Answer 1

首先,

document.querySelector("#elem");

与document.getElementId不同,它具有以下优点:它可以返回类.但是,由于它只返回具有该类名的第一个对象,所以它的用处远远减少了,因此如果您没有专门查找具有该类名的第一个对象,那么您也可以使用id.如果你使用,

document.querySelectorAll

但是,我相信(我可能是错的),它返回具有该类名的所有项作为数组,其中常规querySelector等效于querySelectorAll [0].另一个优点是,您可以通过它运行css3查询,这非常有用.

其次,

document.getElementById("elem");

与查询选择器相比,它具有非常好的优势,因为它几乎快了5倍,所以如果你坐在那里有几千行代码并且想要优化所述代码,那么getElementById就是要走的路.

最后,

document.querySelector("[id=elem]");

我个人认为在任何情况下都不需要使用它.如果你需要一个querySelector,为什么不使用#？这完全等同于你的第一个querySelector示例,但它有很多无用的字符.

编辑:为了清楚起见,总而言之,您最好使用document.getElementById.

Answer 2

你可以自己测试一下。getElementById 是最快的方法