1

I have a global array containing the IDs of elements that I am currently working with. Every second I run a routine that does stuff to these elements.

var ids = ['abc', 'def', 'zyx']

// the following code happens every second
for (var i = 0; i < ids.length; i++) {
  el = $("#" + ids[i])
  // do stuff with el
}

My question: would I suffer a notable performance hit or improvement to do the following:

var ids = []
ids.push($("#abc"))
ids.push($("#def"))
ids.push($("#zyx"))

for (var i = 0; i < ids.length; i++) {
  el = ids[i]
  // do stuff with el
}
Improve this question

3 Answers 3

Reset to default
2

You will not see any notable performance growth but it is just a good habit - to not request the thing twice, as long as you can do that just once an keep somewhere.

So my final advice: cache jquery objects just once and after that work with array of jquery objects

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

You would get a slight improvement, as you are moving some work out of the loop and doing it only once.

For just three items and as seldom as once a second you would hardly notice the difference, though. Locating an element by id is rather easy as the browser has a method specifically for that, and creating a jQuery object is not so much work either.

Improve this answer

2 Comments

Sure, it could be as many as 20 or so. Every little bit helps when we can't control the client's hardware!
@JeffV: Even for as many as 20 it would not be much work. A recent browser on a decent computer could do it about 1000 times a second. I made a performance test, which shows that the difference isn't very big. jsperf.com/precreate-jquery-objects
0

You don’t have to guess — why not create a jsPerf test case?

Anyhow, this change would greatly improve performance. There’s no reason to reconstruct jQuery objects for the same elements all the time.

My advice: keep things DRY — cache everything that can be reused.

Also note that instead of:

var ids = [];
ids.push($("#abc"));
ids.push($("#def"));
ids.push($("#zyx"));

You could just do:

var ids = [ $("#abc"), $("#def"), $("#zyx") ];

This saves a few function calls.

Improve this answer

11 Comments

Thanks, what I wasn't sure about was the overhead of storing jquery objects in an array.
-1 I have to downvote this, because it would definitely not improve the performance greatly. There is an improvement, and it's worth doing, but it's still only barely noticable at best.
Ok, I can understand maybe not greatly, but it seems to be a preferred method. Plus I didn't know about jsPerf, so I found it to be a helpful answer.
@MathiasBynens: That test doesn't compare finding elements vs. cached results, it compares creating jQUery objects from an element vs. putting elements in an already existing jQuery object. I.e. the DOM elements are already found and cached. The test has nothing to do with caching results, but only tests how long it takes to create the jQuery object itself.
@MathiasBynens: That's what I was saying. You are using a test that doesn't event test what you are claiming, but something completely different. Besides, you are micro optimising, which is never a good place to start. If you do this in a test that actually does something with the element, you will find that only a small portion of the time is used to look up the element.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.