jQuery + VanillaJS实现了最快的选择方法

Question

我正在使用jQuery开发一个应用程序，我想知道用jQuery选择元素的最快方法是什么，这个网页中有数百个元素，每个元素都有一个唯一的ID，我这样做：

$("#main-container").addClass("col-lg-12");

我知道这是最慢的方法，所以我认为主要的问题是什么更快？

// 1
$("#main-container").addClass("col-lg-12");

// 2
$(document.getElementById("main-container")).addClass("col-lg-12");

// 3
$(document.querySelector("#main-container")).addClass("col-lg-12");

Answer 1

使用类似http://jsperf.com/的内容进行性能检查

看起来$(document.getElementById("main-container")).addClass("col-lg-12");是这3个中最快的

http://jsperf.com/buttsnanananannana/6

如果您对性能感到恐慌，那么您可能不应该使用jQuery。您可以改为：document.getElementById('main-container').classList.add('col-lg-12')

Answer 2

如果您真的对性能感兴趣，那么您应该使用jQuery。也就是说，如果你想拥有最快的选择方法，你应该使用最多的JavaScript本机特定选择方法，例如：

document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()

据我所知，使用最通用的方法非常简单：

document.querySelector()
document.querySelectorAll()

最后一件事就是他们会花时间查看你的选择器是一个类或id，和/或它是否在另一个元素中。

然而，我的推荐是你每次都可以使用特定的东西，如果你想使用jQuery的东西并用它包装它们，那么这取决于你。

您有jsPerf：

正如您在此图表中所看到的，document.getElementById()比document.querySelector()更快。但当被包裹进$()时，比正常情况慢9倍

Answer 3

$(document.getElementById("main-container")).addClass("col-lg-12");将成为您提供的三个中最快的选择器。