document.getElementbyID vs. variable declaration and delete performance

Question

I would like to know what is more appropriate to do if I really need a good performance for my app. I'm programming cross-platform apps via PhoneGap and the way I code is very crucial.

Which is more appropriate:

document.getElementbyID('id').addEventListener()

or

var id = document.getElementbyID('id');
id.addEventListener();

and how can I use the keyword "delete" to improve the performance of my app?

Answer 1

According to this test i just made on jsperf.com, document.getElementbyID('id').addEventListener() seems to be the fastest way. - in Chrome on Mac OS X.

Try it on the desired browsers, and edit the test to add/remove features such as the delete you were talking about.

Answer 2

The difference between the two will be marginal. To improve performance you should minimize the number of event handlers you add to the dom and remove those you don't require again. Delete doesn't make sense in the context you posted. It should be used to free up items in (associative) arrays or to remove objects you created. You do neither of those in your example.

For lists in which each item is clickable you should just attach one event handler to the list container and not to individual elements. You can then use the target property of the event object passed into the handler to find the actual listitem that was tapped.

---

edit: an example on how to use one event handler for multiple list items

The li.id is used to identify the actual item that was clicked. If the 'li' have children you might have to walk up the target DOM tree until you find the correct item.

<ul id="list">
    <li id="item_1">First Item</li>
    <li id="item_2">Second Item</li>
    <li id="item_3">Third Item</li>
    <li id="item_4">Fourth Item</li>
    <li id="item_5">Fifth Item</li>
    <li id="item_6">Sixth Item</li>
    <li id="item_7">Seventh Item</li>
</ul>

<script>
    window.onload(function() {
        document.getElementById("list").addEventListener("click", 
            function(event) { alert("" + event.target.id + " was clicked"); });
    });
</script>

Answer 3

JavaScript is interpreted at runtime, so ultimately it depends on whether or not the compiler optimizes away that variable allocation or not. Either way, the difference will be extremely small. Build a few tests and see.

Focus on readability (and finding a model where you are not worried about micro-optimization).

and how can i use the keyword "delete" to improve the performance of my app?

Since you are discussing performance-intensive applications, I assume you are interested in proper garbage collection in JavaScript. See How does garbage collection work in JavaScript?

Answer 4

It is better to use

var id = document.getElementbyID('id');
id.addEventListener();

If you require the DOM element more than once else it takes same time for both ways.