JQuery

JQuery parent() vs. parents() Which is faster?

TAGs: 0 Comment

Posted By: eligeske on in JQuery

In most cases parent() is faster…. here is why

If you are here, I am sure you already know about jQuery’s parent() method and parents() method.  What I ended up doing to find out which one was faster was to create a simple benchmark test using only FireFox. This result sufficed for me but it may differ with each browser engine.

Test Scenario: HTML page consisting of nested div’s. Thirty in total. I set an id and class at parent number 2, 5, 15, and 30.  Then I used jQuery’s parent(), parents(‘#id’), and parents(‘.class’) to find out which one was the speediest.

I created a click function which I hit 10 times for each test and captured the execution time and how many underlying method calls were made for each group of ten clicks. Those are displayed as the “calls”. The times are display as “time” but are in milliseconds. So if it says 5.23, it is actually 5.23 milliseconds. The number of nodes traversed up is marked as “nodes”.

Functions: here is what the functions I used looked like

function findParent(obj){         
        $val = obj.parent().parent().parent().parent().parent().attr('class');
        $('#output').val($val);
    }
 
    function findParents(obj){
        $val = obj.parents('.toppest').attr('class');
        $('#output').val($val);
    }
 
    function findParents2(obj){
        $val = obj.parents('#topClass2').attr('class');
        $('#output').val($val);
    }
 
    $(function(){               
        $('#child').click(function(){
            findParent($(this));                           
        });
        $('#child2').click(function(){
            findParents($(this));                           
        });    
        $('#child3').click(function(){
            findParents2($(this));                           
        });
    });

 

Notice on the find parent method how many times .parents() is added. Can you imagine doing that for thirty nodes? ya….  that’s why I added the little value to a box when I clicked it to make sure I was grabbing the right one for test purposes. It really had nothing to do with the benchmark but since it was consistent across each one it does not screw with the test.

Averaged Results:

x’s nodes parent() parents() by class parents() by id
time  calls time calls time calls
10 2 3.435 420 4.412 460 4.607 780
10 5 3.989 600 4.407 460 4.665 780
10 15 5.175 1200 4.504 460 4.644 780
10 30 7.113 2100 4.579 460 4.956 780

I made this table look pretty with tablestyler.com

Findings:

The results of the test are that using parent() even though not as clean looking in the code is actually faster for smaller traversing. But as you get farther up the DOM tree away from your child element parent() slows down.

Using parents() is pretty consistent all the way across the board with only a slight increase in time to complete the call whether your nested forty in or only one down. Plus keeps you from writing parent() ten or twenty times over.

My Suggestions:

I would use parent() for anything under 5 or 6 away from the child and use parents() every where else. That is of course if you know what element you’re look for exactly. Then in that case you may need to use the parents() method.

P.S. I hope your HTML never has an element that is nested 30 down. If so, you are probably using .NET

 

0 Responses to "JQuery parent() vs. parents() Which is faster?"

"SHARING IS CARING"

Comments are closed.

Learning DHTMLX Suite UI

Learn the foundation of the DHTMLX Suite quickly while building a single page application with multiple components in harmony.

Popular post