0

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Sultan Shakir
  • 724
  • 2
  • 11
  • 22
  • 3
    Only visibly display a few hundred elements to the DOM at a time. Use virtualized scrolling to remove/add elements to the DOM as they are scrolling etc. IE7/8 of course can't handle that many elements, so you'll notice the delay in scroll time / hover / everything. – Mark Pieszak - Trilon.io Apr 19 '13 at 16:25
  • "Any ideas what could be my issue?" Is the answer not in the question? – Beetroot-Beetroot Apr 19 '13 at 16:34
  • @mcpDESIGNS do you know of a js library or jq plugin that will remove elements that are out of view and being them back when the user scrolls up? – Sultan Shakir Apr 22 '13 at 23:24
  • 1
    I'd say google around and find one that suits your needs, but there are a few out there freely available! For example: http://www.jeasyui.com/tutorial/datagrid/datagrid27.php. I personally have kendoUI in my project, we use their datagrid, which has virtual scrolling as an option you can turn on. Works great! @SultanShakir – Mark Pieszak - Trilon.io Apr 23 '13 at 14:03
  • @mcpDESIGNS Unfortunately both of these solutions tanked with IE8 in IE7 Document mode. I just found a solution (Slickgrid - https://github.com/mleibman/SlickGrid) that I was looking at years ago for a more basic datagrid but it also can handle 1000s of rows doing the remove/add you suggested. – Sultan Shakir Apr 23 '13 at 17:57

3 Answers3

3

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.

Halcyon
  • 57,230
  • 10
  • 89
  • 128
1

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.

Michael Geary
  • 28,450
  • 9
  • 65
  • 75
  • 1
    Thanks. Before I try this I have a question. I see that you have #formparent as the first argument. I thought the first argument has to be an event? – Sultan Shakir Apr 20 '13 at 06:25
  • Ack! That was a dumb typo on my part. That's what I get for posting an answer off the top of my head without double-checking it first. I corrected the example; thanks for catching that. – Michael Geary Apr 20 '13 at 07:16
  • Did this. It helped a little but IE8 sucks. – Sultan Shakir Apr 22 '13 at 23:04
0

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.

cwebbdesign
  • 41
  • 3
  • I modified my event listeners as suggested by Michael Geary but I would like to implent a feature that does something similar to infinite scroll but actually removes content when it is out of view. – Sultan Shakir Apr 22 '13 at 23:03