Javascript performance on IE

[Kickstart]

Hi

I have an app I have written that is VERY heavily Javascript based (loads of Ajax). Data is generated and written to Javascript arrays and when the page is loaded these arrays are processed and displayed in a table. Cells of the table are updated by the user using various popup panels that update background databases using Ajax routines.

Basically it is a spreadsheet but linked directly to a background database.

Hammering it a bit I have lobbed a bit over 1000 rows of data at it (and each row has about 20 columns, with the values of the columns being validated and used to colour the columns). With 1000 rows and on average about 3 checks per cell that is about 60k checks when the page is loaded (in real use I would doubt anyone will be hitting it that hard more than occasionally, users can filter the data before it is displayed).

Generally works fine. Firefox, Opera, Safari and Chrome all load the page with this much data pretty quickly, and everything is displayed and calculated within about 5 seconds (slower than I would like, but within reason for the amount of data). IE8 on the other hand takes about 80 seconds to do the same page load .

I have tried to go through optimising the code, but not really reduced the load time by much.

Any suggestions to try and get it to run acceptably (short of telling the users to get a decent browser - unfortunately not really an option). It doesn't really appear to be anything specific, just IE being dog slow.

All the best

Keith
____________________
Traxpics, track day and racing photographs - Bimota Forum - Bike performance / thrust graphs for choosing gearing

[Christopher]

Have you run the profiler within the IE8 Developer Tools to narrow down which function(s) is/are taking the most time to run?

[Kickstart]

Hi

I hadn't (rarely use IE), but just gave it a try. The only function it is spending time is to a great extent is one that does very little! The initiate function that mainly loops round other functions (and now has an attempt at caching the results of those calls to reduce the number of them). 94946 inclusive milliseconds and 88741 exclusive milliseconds.

Will have more of a play.

All the best

Keith
____________________
Traxpics, track day and racing photographs - Bimota Forum - Bike performance / thrust graphs for choosing gearing

[Kickstart]

Hi

Having been crawling through it I have found what is causing the problem, but no idea how to fix it.

There is a routine to check the value of a field and colour the cell of the table depending on what clause of the check has been satisfied. That this might take a bit of time doesn't surprise, but that is actually fairly quick. What is taking about 80% of the time is the line that does a getElementById so that it can set the background colour (setting the background colour takes another 10% of the time).

All the best

Keith
____________________
Traxpics, track day and racing photographs - Bimota Forum - Bike performance / thrust graphs for choosing gearing

[SoND]

Is this relevant?

https://www.artlebedev.com/tools/technogrette/js/lookup-tables/
____________________
Go back to bed - You have no rights - "Streetfighters ~ Mainstream motorcycling's crackwhore sister."

[Kickstart]

Hi

Thanks for that. It is trying to deal with a similar issue, but the solution won't work for me. The problem I have is doing the original getElementById thousands of times, which I would still need to do to build up the cache. Once the page is built it is only manipulating maybe 25 cells at a time at most so the performance is far less relevant.

All the best

Keith
____________________
Traxpics, track day and racing photographs - Bimota Forum - Bike performance / thrust graphs for choosing gearing

[SoND]

Navigating the table using nodes.

https://preciseinfo.org/Convert/Articles_JS/Callback_Code/Javascript-Callback-Code-04802097.html
____________________
Go back to bed - You have no rights - "Streetfighters ~ Mainstream motorcycling's crackwhore sister."

[Kickstart]

Hi

That is what I was thinking of doing (or getting the elements by tag name). Useful link as it will help me code it. Thanks.

All the best

Keith
____________________
Traxpics, track day and racing photographs - Bimota Forum - Bike performance / thrust graphs for choosing gearing

[G]

Is 'Chrome Frame' a possibility? It embeds Chrome in IE basically, but without actually installing a new browser.

We have a very, very Javascript based product (it is based on the ExtJS Desktop - https://www.extjs.com/deploy/dev/examples/desktop/desktop.html ) and have serious issues with IE.
Hopefully will be a bit better in IE9, but haven't found any solutions to generally improving performance.

[Kickstart]

Hi

Not sure, but this app is for a 3rd party company and I can't see them installing anything like that. Wouldn't bet on them upgrading to IE9 before IE10 is out.

My guess is that IE internally stores the ids in a totally unsorted list and then loops through them all to find the one you are searching for. Hence running like a 3 legged dog.

All the best

Keith
____________________
Traxpics, track day and racing photographs - Bimota Forum - Bike performance / thrust graphs for choosing gearing

[Kickstart]

Hi

Been having a go at trying to speed it up. Have managed about a 70% reduction in the time it takes to load in IE, but it is still dog slow compared to other browsers. Not sure I am going to get it to go that much quicker.

No longer using getElementById, instead I have used getElementByTagName and then looped through them. Have cached the element references in arrays which has helped a lot. Pulled a few minor tricks to boost speed as well.

Also broken the load down into a few stages and triggered each one from the previous one with a timer to give a short delay (means the page updates so it doesn't just look like it has locked up).

All the best

Keith
____________________
Traxpics, track day and racing photographs - Bimota Forum - Bike performance / thrust graphs for choosing gearing