当在jquery中被缓存时，ID选择器是否比类选择器更快？

Question

我知道在Javascript中，ID选择器比类选择器更快。但是如果我缓存了选择器会怎样呢？当选择器被缓存时，如果它是一个类选择器，速度是否会有所不同，还是和ID选择器一样快呢？

例如：

<div class=”myclass”></div>
<div id=”myid”></div>

var $myclass = $('.myclass');
var $myid = $('#myid');

$myid会比$myclass更快吗？

- Hakan

---

我不确定你的例子是否正确。你在这里想做什么 - 你的第二行将返回空值？ - Paddy

我认为你的代码示例有误。你引用了 #myid 但是你没有一个带有 id 属性的标签。你正在通过类设置两个属性。 - Doug Chamberlain

那些引号很奇怪。它们绝对不是合法的HTML；请使用常规的"引号而不是那些”东西。 - rvighne

Answer 1

缓存的对于DOM节点的引用是最快的方式。因此，一旦您存储了一个引用，它是如何到达那里并不重要。

桥梁示例

想象一下，在您的JavaScript世界和DOM世界之间有一座桥梁。每次您想从JavaScript中访问DOM世界中的一个元素（一个“公民”）时，您需要越过这座桥梁...但这是不免费的..您需要支付昂贵的过路费。因此，您应该只走这条路一次，只付一次费用。

如果您知道元素的确切位置（存储在变量中），则可以立即访问它。

- jAndy

Answer 2

你将这些存储在变量中。因此，两者的速度将是相同的。

性能下降将发生在迭代DOM以获取元素时。这时，ID选择器比类选择器更快。

- rahul

Answer 3

只是为了确保我没有误解您的意思... 我认为您的意思是

<div class="myclass"></div>
<div id="myid"></div>

然后在 jQuery 中你正在做：

var $myclass = $('.myclass');
var $myid = $('#myid');

我对jQuery的理解是，在创建变量时，创建$myclass不如创建$myid快...但当你以后再使用它们时，它们的速度将是相同的。

- Patrick

Answer 4

正如您所说，ID是更快的查找方式，但选择哪一个更多地取决于您想要做什么。

把一个类看作一个类别或分类，用于不同具有共同或共享特性的项目，而相比之下，ID具有一些独特属性，它是独一无二的。如果我们处理货币价值，那么有许多单独的数字和一些小计，但只有一个总数。您可能想使用.figure类来格式化所有单独的数字的样式，.subtotal类为每个小计分配不同的样式，您可以为总数分配一个ID，因为您希望它具有独特的样式，并且只会有一个。

如果你想动态地找到所有的值并将它们转换成另一种货币，那么找到所有的值是很简单的，编写代码以一次性转换它们也是微不足道的，而按id查找每个数字的代码编写起来则非常繁琐而容易出错。

因此，这真的取决于您想要做什么。如果您想找到一个且只有一个项目，那么id会更快，但如果所有项目都有共同点，那么仅通过class引用所有项目肯定更简单（而且可能更快）。我很想看到比较它们的测试结果......

当某人输入转换比率后，单击转换按钮更新所有值的代码：

$('#convertBtn').on('click', function () {
    var factor = $('#convRatio').val();
    var $err = $('#errorPanel');// only create once to save resources 

    if (factor) {
        // remove any error condition
        if ($err.text()) {
            $err.text("");
        }
        // get an array-like object of all the values
        var $vals = $('#total, .subtotal, .figures');

        $vals.each(function () {
            var $th = $(this);// only create once to save resources
            var val = $th.text();

            $th.text(val * factor);
        });
    } else {
        $err.text("Please enter a conversion rate");
    }
});

当您单击其中一个小计时，突出显示仅小计的代码：

var $subs = $('.subtotals');

$subs.on('click', function () {
    var $sub = $(this);// only create once to save resources

    if ($sub.hasClass('hilite')) {
        $sub.addClass('hilite');
    } else {
        $sub.removeClass('hilite');
    }
}

点击时仅突出显示总数的代码：

var $tot = $('#total');// only create once to save resources

// toggle highlighting on and off when any subtitle is clicked
$tot.on('click', function () {
    if ($tot.hasClass('hilite')) {
        $tot.addClass('hilite');
    } else {
        $tot.removeClass('hilite');
    }
}

- TriumphST

Answer 5

看一下这些提示

http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx?sms_ss=favorites

上面的链接建议尽可能使用ID而不是类。

描述：

jQuery使得使用类选择DOM元素就像以前选择元素时使用ID一样容易，因此诱人更加慷慨地使用类。但是仍然更好地按ID选择，因为jQuery使用浏览器的本机方法（getElementByID）来执行此操作，并且不必执行任何自己的DOM遍历，速度更快。有多快？让我们找出来。

我将使用以前的示例并对其进行调整，以便我们创建的每个LI都添加了一个唯一的类。 然后我将循环遍历并选择每个LI一次。

// Create our list
var myList = $('.myList');
var myListItems = '<ul>';

for (i = 0; i < 1000; i++) {
    myListItems += '<li class="listItem' + i + '">This is a list item</li>';
}

myListItems += '</ul>';
myList.html(myListItems);

// Select each item once
for (i = 0; i < 1000; i++) {
    var selectedItem = $('.listItem' + i);
}

正当我以为我的浏览器挂了时，它在5066毫秒（超过5秒）内完成了。因此，我修改了代码，给每个项目分配了一个ID而不是类，并使用ID进行选择。

// Create our list
var myList = $('.myList');
var myListItems = '<ul>';

for (i = 0; i < 1000; i++) {
    myListItems += '<li id="listItem' + i + '">This is a list item</li>';
}

myListItems += '</ul>';
myList.html(myListItems);

// Select each item once
for (i = 0; i < 1000; i++) {
    var selectedItem = $('#listItem' + i);
}

这次只花了61毫秒。快了近100倍。

- ashish.chotalia

---

你怎么可能期望HTML具有多个相同的ID？ - ProllyGeek