CODEWITHSUNDEEP
javascriptperformanceinline
Geromey
Geromey

Reputation: 55

Inline javascript performance

I know it is better coding practice to avoid inline javascript like:

<img id="the_image" onclick="do_this(true);return false;"/>

I am thinking about switching this kind of stuff for bound jquery click events like:

$("#the_image").bind("click",function(){
     do_this(true);
     return false;
});

Will I lose any performance if I bind a ton of click events? I am not worried about the time it takes to initially bind the events, but the response times between clicking and it happening.

I bet if there is a difference, it is negligible, but I will have a ton of functions bound. I'm wondering if browsers treat the onclick attribute the same way as a bound event.

Thanks

Upvotes: 4

Views: 655

Answers (3)

Mike Robinson
Mike Robinson

Reputation: 25159

Save yourself the worry, use the on event

$("#the_image").on("click",function(){
     do_this(true);
     return false;
});

One event, with no performance hit with multiple items.

Upvotes: 2

Tracker1
Tracker1

Reputation: 19334

The difference is negligible. If you have to bind to many items in the page, there can be a performance hit, and you may want to bind to a higher level object, and simply intercept the target item (image) where you are binding the click to a containing DIV tag. Other than that, it should be fine and will depend on your use case specifically.

Look into event bubbling in javascript for more specifics.

Upvotes: 0

Eric Cope
Eric Cope

Reputation: 877

In my work, it depended. I moved all of my events to jquery. Then I profiled the javascript using FireBug to see what was taking the longest. Then I optimized those taking the longest.

If its just a few, you won't notice any degradation. If its hundreds or thousands, then you might.

Upvotes: 1

Related Questions