Question

我知道在Javascript中，ID是一个比类更快的选择器。但是如果我缓存选择器呢？当缓存选择器时，如果它是类选择器，它的速度是否会不同，或者它是否与id选择器一样快？

示例：

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

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

$ myid会比$ myclass快吗？

Answer 1

对DOM node的缓存引用始终是最快的方式。因此，一旦您存储了引用，它就没有区别如何它到达那里。

桥梁示例

想象一下，您的 Javascript世界与 DOM世界之间存在桥梁。每次你想从DOM世界中的Javascript访问元素（“公民”）时，你需要越过那座桥......但这不是免费的......你需要付出相当昂贵的收费。
所以你应该只采用一次，因此只支付一次。

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

Answer 2

你有那些存储在变量中的东西。所以两者的速度都是一样的。

当您迭代DOM以获取元素时，将发生性能损失。那时ID选择器将比类选择器快。

Answer 3

只是为了确保我没有错过这个标记......我认为你的意思是

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

然后在jquery你做的事情：

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

我对jquery的理解是，在创建vars时创建$ myclass并不像创建$ myid那么快......但是当你稍后再回来使用它们时。他们将是相同的速度。

Answer 4

正如您所说，ID是一种更快的查找方法，但是您选择的ID与您要执行的操作有很大关系。

考虑一个类别，例如类别或分类的不同项目，这些项目具有共同或共享的方面，而ID则具有某种独特的属性，这是一种。如果我们处理货币价值，那么会有很多单独的数字，还有一些小计，但只有一个总数。您可能需要使用.figure类来格式化所有单个图形的样式，为每个小计使用.subtotal类，以便可以为它们设置不同的样式，并且可以为总数指定ID，因为您希望它具有唯一性样式，只有一种。

如果您动态地想查找所有值并将它们转换为另一种货币，那么找到所有值并编写代码以一次将它们全部转换将是一件很简单的事情，同时将代码编写为找出每个按ID排列的数字充其量是令人厌烦的。

所以，这实际上取决于您要执行的操作。如果只想找到一个项目，则id会快得多，但是如果所有项目都有共同点，那么按类来引用它们肯定更简单（可能更快）。我很好奇看到比较这些测试结果...

在有人输入转换率后单击转换按钮以更新所有值的代码：

$('#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');
    }
}

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都添加了一个唯一的类。然后我会循环并选择每一个。

// 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倍。

在jquery中缓存时，ID选择器比类选择器更快

5 个答案:

桥梁示例