1

some posts have suggested #id is faster than .class in Jquery based on speed test or #id and .class have been optimized for browsers. However, I suppose it should be down to how it traverse along the HTML Dom tree.

For example: 

            P
            |
    ---------------
    |             |
    C1            C2
    |             |
 -------       ------
 |     |       |    |

 C11   C12     C21  C22

For find c12, the path is P-C1-C11-C1-C12 (it could be different path depending on the structure, but it's I can remember now)

no matter c12 is class or id, it will be the same path, which means the same performance for $('#C12') or $('P C1 .C12')

My first question is if my understanding is right? Question 2: I keep thinking about performance of one to another and minimize my codes to put duplication together into functions, on the other hand, it takes time. Should I keep doing it or just to make it work first and change it later?

Thanks.

Joseph Silber
  • 214,931
  • 59
  • 362
  • 292
N Zhang
  • 119
  • 1
  • 3
  • 1
    ID and class are two different things. IDs are unique, which is why they're probably faster, whereas you can have any number of elements sharing a class value. – Garry Cairns Jan 27 '13 at 18:32
  • 1
    `Should I keep doing it or just to make it work first and change it later?` On the performance side, *stop doing it.* First, make it work. Then, and only then, make it fast. – Frédéric Hamidi Jan 27 '13 at 18:33

2 Answers2

1

why bother yourself guessing, here is a live example with the same structure and selectors: http://jsfiddle.net/3Ah5S/

HTML

<div id="idP" class="classP">
            <h1>P</h1>
            <div id="idC1" class="classC1">
                <b>C1</b>
                <div id="idC11" class="classC11">
                -->C11
                </div>
                <div id="idC12" class="classC12">
                -->C12
                </div>
            </div>
            <div id="idC2" class="classC2">
                <b>C2</b>
                <div id="idC21" class="classC21">
                -->C21
                </div>
                <div id="idC22" class="classC22">
                -->C22
                </div>
            </div>      
        </div>
        <br/>
        <div id="idResults">

        </div>
        <br/>
        <div id="classResults">

        </div>

jquery test code

$(document).ready(function(){

                startTime = new Date().getTime();
                for (i = 0; i < 10000; i++)
                {
                    s = $("#idC12");
                }           
    $("#idResults").html("c12 by id time: "+elapsedMilliseconds(startTime));

    startTime = new Date().getTime();
                for (i = 0; i < 10000; i++)
                {
                    s = $(".classC12");
                }           
    $("#classResults").html("c12 by class time: "+elapsedMilliseconds(startTime));
});

function elapsedMilliseconds(startTime)
            {
                var n = new Date();
                var s = n.getTime();
                var diff = s - startTime;
                return diff;
            }

definitely ID time is faster cause it take advantage of browser-specific instructions to get your element directly without traversing the DOM tree.

Update: the reason why searching by ID is faster is that browsers tend to create a variable for every element with a unique ID inside your DOM tree while rendering the page, so querying by ID is the fastest way because it will get your element using the associated variable directly.

a good explanation can be found here: http://javascript.info/tutorial/searching-elements-dom

Mohammed Swillam
  • 9,119
  • 4
  • 36
  • 47
  • tks for your reply, and appreciated your code. but you didn't explain the reason clearly why id is faster, regarding to "browser-specific instructions", do you mean a id table was create to map all ids into DOM tree? – N Zhang Jan 28 '13 at 01:08
0

Therefore, .videoContainer should be "faster" than #dialog .videoContainer because it misses out testing for #dialog.use this

Community
  • 1
  • 1