Javascript Performance Issue with long page

Question

I am working with a really long page with over 3400 items. Each of those items has a form with 3 buttons and each form has a jQuery $.on() click event attached to it. I am thinking that this is what is causing my issues (slow response to hover, long time to render page) in IE8 with IE7 Document mode. When I select $('button') I get over 10K elements.

The page is being rendered using the fast DoT.js templating library from a JSON object that can go about 6 levels deep.

Any ideas what could be my issue?

Answer 1

From my experience IE7 and IE8 are extremely slow. IE9 is better, IE10 is acceptable.

If you absolutely need this to perform you'll have to look at more invasive performance tweaks, like not rendering all 3400 elements.

From what you describe the performance hit likely isn't in your JavaScript code. If hover events take a long time, that means the browser is just slow.

Answer 2

Have you tried removing the javascript to see how the page performs? If you can't remove it, then disable it in the browser and see what the impact is. If your page runs faster, then you know you've found a part of the problem.

3400+ event listeners is a lot, you could try re-writing the javascript to allow delegated event listener higher up in the DOM. You have 3 buttons, so perhaps delegate three listeners and pass the clicked form element to the the handling functions. Beyond that, it's hard to know if there's other javascript performance problems without knowing what the rest of your code does.

Frits is also correct that IE7/8 are slow and if performance is a priority, it would be beneficial to consider rendering less elements at a time.

Answer 3

If the problem is the multitude of event handlers, it's trivial to fix that with event delegation.

You didn't mention the structure of your DOM elements, but for sake of example, let's say you are currently attaching event handlers with:

$('.myform').on( 'click', function() { /*...*/ } );

where myform is a classname on each of your forms.

Now suppose you have these forms nested in a parent element with id="formparent". All you need to do is change the code to:

$('#formparent').on( 'click', '.myform', function() { /*...*/ } );

It's really that simple.

If you post some of your code, someone could give a more specific suggestion.