2

my work requires me to work with jquery a lot. Since i am always trying to find a better way to do things, i would like to improve performance on javascript level of page.

so i was wondering what is the fastest way to get specific children of DOM element in Jquery?

Lets say we have it like this:

parent
|-element 1
|-element 2
|-parent element 1
|---element A
|---element B
|-parent element 2
|---element C
|-element 3

Which of the following methods would be most suitable to get every specific element, assuming every element in the first branch of dom tree has an identifiable id or class different from others and there is no limitations to what kind of elements they are?

Method 1:

getting each element with its own selector as such:

var element1 = $(".element1");
var element2 = $(".element2");
...

Method 2:

getting each element with parent element as such:

var parent = $(".parent");
var element1 = parent.children('.element1');
var element2 = parent.children('.element2');
...

Method 3:

getting the whole thing in array and parsing trough it as such:

var elements = $(".parent").children();
var element1 = elements[0];
var element2 = elements[1];
var elementA = elements[2].children('elementA');
// or maybe like this?
// var elementA = elements[2].children()[0];
...

On the dom tree presented i also included nested parents and children. Which method is most suitable to get those, especially if they do not have a unique identifier?

for instance with regard to dom tree presented: would it be faster to get element like this (assuming parent element has no unique identifier):

var elementA = $(".parent").children(".parent-element-1").children(".elementA")

or

var elementA = $(".parent").find('.elementA')

?

Also if there is any other way (except calling elements through sizzle) to get to elements, please do tell me about it :)

I am aware i could call elements via javascript alone, but with a few hundred dom elements, such a task would probably be way outside my usual time frame - or is this standard?

EDIT:

sizzle is slow: http://jsperf.com/sizzle-is-slow/2

What im asking about is the proper use of jquery/javascript methods.

em2
  • 93
  • 6
  • 3
    use http://jsperf.com/ to create a benchmark test... `var elementA = $(".parent .elementA')` – Arun P Johny Oct 06 '14 at 10:45
  • You forgot to add two ways to your list of options: `$('.elementA', '.parent')` and `$('.parent .elementA')` – emerson.marini Oct 06 '14 at 10:46
  • isnt sizzle type of calling elements slower than getting it through jquery methods? that is why i left out those options – em2 Oct 06 '14 at 10:47
  • But `sizzle` is part of the `jQuery` library. The part that works exactly with elements selection. But I got your point. – emerson.marini Oct 06 '14 at 10:49
  • Fetching by ID will always be the fastest (if you can contrive that in your hierarchy) as IDs are in a browser fast-lookup dictionary. – iCollect.it Ltd Oct 06 '14 at 10:54
  • yeah, sizzle is a part of jquery library, but as far as i've read it isnt by far as fast as looking up elements with jquery dom methods and if this is a few miliseconds of difference it still makes difference when iterating through a huge lot of them – em2 Oct 06 '14 at 10:55
  • how many times faster is lookup by id compared to class? if there is a unique class that no other element has – em2 Oct 06 '14 at 10:56
  • 1
    I think this question should be moved to [Code Review Stack Exchange](http://codereview.stackexchange.com/) – emerson.marini Oct 06 '14 at 10:58
  • Also find is faster than children. http://jsperf.com/jquery-children-vs-find – SSA Oct 06 '14 at 11:00
  • @SSA: I am slightly puzzled by that result as children should be a direct iteration on the child elements. Might be down to the filtering out of text nodes etc. Learn something new every day :) – iCollect.it Ltd Oct 06 '14 at 11:02
  • children() should be faster, since find() traverses whole DOM tree, also: no-one yet anwsered the question (which of methods is fastest) – em2 Oct 06 '14 at 11:06
  • @TBA: I was surprised too but it's the truth. You can also follow the discussion here http://stackoverflow.com/questions/648004/what-is-fastest-children-or-find-in-jquery. In theory children should be fast but fact is find is faster until and unless there is a huge DOM tree. – SSA Oct 06 '14 at 11:08

1 Answers1

0

Fetching by ID will always be the fastest (if you can contrive that in your hierarchy) as IDs are in a browser fast-lookup dictionary. Classes require a lot more iteration as it supports multiples. The results I am finding via Google suggest IDs lookup is about twice as fast as using classes to find elements.

You could use a hierachical naming of the IDs:

parent - ID= P1
|-element 1 - ID = P11
|-element 2 - ID = P12
|-parent element 1 - ID= P13
|---element A - ID = P131
|---element B - ID = P132

etc

Note: I am not suggesting this way of organizing elements, or best use of jQuery, but just as a way to get massive speed increases for the specific problem outlined :)

iCollect.it Ltd
  • 92,391
  • 25
  • 181
  • 202
  • I know it's just one example, but the hierarchical naming would need to use a separator (ie P1-3) to distinguish between the thirteenth item (P13) and the third child of the first item (P13) – Adam Hopkinson Oct 06 '14 at 11:14
  • @Adam Hopkinson: or just a fixed number of digits per level? `P010203` etc – iCollect.it Ltd Oct 06 '14 at 11:37