Best practice for HTML5 web application: using getElementByID or link storage?

Question

I am creating one of my first web applications using HTML5, in particular for the iPhone.

Since I'm fairly new to this, I am trying to develop some good coding habits, follow best practices, optimize performance and minimize the load on iPhone with limited resources.

One of the things I need to do often ... I have a lot of divs (each of which has a unique identifier) ​​that I often update (for example, using innerHTML) or change (for example, style attributes with webkit transitions and transformations) .

In general - should I use getElementByID every time I need a div descriptor, or do I need to store references to every div that I refer to in the "global" variables at the beginning?

(I use the "global" in quotation marks because I really only have one really global variable - this is an object that stores all my "global" variables as properties).

I assume that using getElementByID each time should have some overhead since the function must traverse the DOM to find the div. But, I'm not sure how the taxation or effectiveness of this function.

Using global variables to store descriptors for each element should consume some memory, but I don’t know if this link just requires a trivial amount of RAM or more.

So - which is better? Or, both options consume such a trivial amount of resources that I should only worry about, which creates more readable, supported code?

Thank you very much in advance!

Answer 1

"In general, I’d better use getElementByID every time I need a div handle, or I have to store links to each div"

When you call getElementById , you ask it to complete the task. If you do not expect another result when calling the same method with the same argument, then it seems to make sense to cache the result.

"I suppose using getElementByID every time should have some overhead since the function must traverse the DOM to find the div. But I'm not sure how the taxation or the effectiveness of this function is."

In modern browsers, this is very fast, but not as fast as finding a property on your global object.

"Using global variables to store descriptors for each element should consume some memory, but I don’t know if these links require just a trivial amount of RAM or more."

Trivial This is just a pointer to an object that already exists. If you remove an element from the DOM without the intention of using it again, then of course you will want to free it.

"So, which is better? Or are both options consuming such a trivial amount of resources that I should only worry about, which creates more readable, supported code?"

It depends entirely on the situation. If you only pick it up a couple of times, then you cannot add it to your global object. The more you need to get the same element, the more sense it caches it.

---

This compares the jsPerf test . Of course, the size of your DOM, as well as the length of the variable visibility traversal and the number / depth of properties in your global object will play a role.

Answer 2

Using a local variable or even an object property is much faster than getElementById (). However, both of them are so fast that their performance, as a rule, does not matter compared to any other operation that you could do when you have an element. An event that sets a single property in an element is several orders of magnitude slower than retrieving it in any way.

Thus, the main reason for caching an element is to avoid the rather long document document.getElementById (...) or to prevent the element identifier lines from being scattered throughout your code.