javascript - Is ID selector faster than class selector when it is cached in jquery - Stack Overflow

admin管理员组

文章数量:1346186

I know that ID is a faster selector than class in Javascript. But what if I cache the selector? When the selector is cached, would it differ in speed if it’s a class selector, or will it be as fast as the id selector?

Example:

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

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

Will $myid be faster than than $myclass?

I know that ID is a faster selector than class in Javascript. But what if I cache the selector? When the selector is cached, would it differ in speed if it’s a class selector, or will it be as fast as the id selector?

Example:

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

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

Will $myid be faster than than $myclass?

• javascript
• jquery
• selector

Share Improve this question Follow edited Feb 17, 2011 at 13:15 lonesomeday 238k5353 gold badges327327 silver badges328328 bronze badges asked Feb 17, 2011 at 13:01 HakanHakan 16922 silver badges99 bronze badges 3

• I'm not sure your example is quite right. What are you trying to do here - your second line will return nothing? – Paddy Commented Feb 17, 2011 at 13:06
• I think your code sample is wrong. You reference #myid but you do not have a tag with an id attribute. You are setting both by class. – Doug Chamberlain Commented Feb 17, 2011 at 13:06
• Those are weird quotes. They're definitely not legal HTML; use regular " quotes instead of those ” things. – rvighne Commented Jun 3, 2014 at 4:06

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

The cached reference to a DOM node is always the fastest possible way. So once you have a reference stored, it makes no difference how it did get there.

The bridge example

Imagine there is a bridge between your Javascript world and the DOM world. Each time you want to access an element (a "citizen") from Javascript in the DOM world, you need to cross that bridge.. but that is not for free.. you need to pay a pretty expensive toll.
So you should only go that way once and therefore only pay once.

If you know the exact position of the element (which is stored in a variable) you can just access it in no time.

You have those stored in variables. So the speed will be the same for both.

The performance hit will occur when you are iterating DOM to get elements. At that time ID selector will be faster than class selector.

Just to make sure I'm not missing the mark... I think you mean

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

and then in jquery your doing:

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

My understanding of jquery is that when creating the vars creating the $myclass is not as fast as creating the $myid... but when you go back to use them later. they will be the same speed.

As you said, the ID is the faster lookup, but which one you chose has more to do with what you want to do.

Think of a class like a category, or classification for different items that have a mon or shared aspect to them, while an ID in contrast, has some unique property it is one of a kind. If we were dealing with monetary values, there are many individual figures, and some subtotals and but only one total. You may want to use a .figure class to format the styling of all the individual figures, a .subtotal class for each subtotal so you could style them differently, and you could assign an id to the total, because you want it to have unique styling, and there will only be one.

If you dynamically wanted to find all the values and convert them to a different currency, it would be a simple thing to find all the values and writing the code to convert them all at once would be trivial, while writing the code to find each number by id would be tedious at best and confusing.

So, it really depends on what you are trying to do. If you want to find one and only one item, an id is far faster, but if all the items have something in mon, it is certainly simpler (and possibly faster) to reference them all by class instead. I would be curious to see a test result paring those ...

Code to update all the values on click of a convert button after someone enters a conversion ratio:

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

Code to highlight just the subtotals when you click on one of them:

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

Code to highlight just the total when clicked:

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

Have a look at this tips

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

Above link suggest to Use IDs instead of classes wherever possible

Description here:

jQuery makes selecting DOM elements using classes as easy as selecting elements by ID used to be, so it's tempting to use classes much more liberally than before. It's still much better to select by ID though because jQuery uses the browser's native method (getElementByID) to do this and doesn't have to do any of it's own DOM traversal, which is much faster. How much faster? Let's find out.

I'll use the previous example and adapt it so each LI we create has a unique class added to it. Then I'll loop through and select each one once.

// 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);
}

Just as I thought my browser had hung, it finished, in 5066 milliseconds (over 5 seconds). So i modified the code to give each item an ID instead of a class and then selected them using the 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);
}

This time it only took 61 milliseconds. Nearly 100x faster.

本文标签： javascriptIs ID selector faster than class selector when it is cached in jqueryStack Overflow