CODEWITHSUNDEEP
javascriptjqueryfirefox
tdoakiiii
tdoakiiii

Reputation: 372

Animation lag and performance issues on web application that is always running

the web app I am developing is rather typical. MySQL to store data, PHP to retrieve, jQuery to make it look nice and AJAX to make it async.

My client only uses FireFox and has the web app potentially open 24/7. The app may request a lot of data over several hours and is constantly updating a large table on the page. I have noticed with FireFox that within an hour or so that jquery animations (even the most simple ones) will start to lag. I have confirmed that this is the cause (the long period of time that the browser is open) because starting a fresh new browser will remedy this.

I have read some things about FF garbage collector not being optimal for its JS engine, but I don't really know if this is the issue. I am looking for any general guidance on how to handle this kind of situation.

Thanks

Upvotes: 1

Views: 483

Answers (1)

Shlomi Hassid
Shlomi Hassid

Reputation: 6606

You have not given any code but I suspect that its the setInterval (mentioned in comments) combined with the ajax calls that is causing your problem.

If I get it right you are constantly firing async AJAX calls within an interval function (CASE 1). Or you are firing an interval function for each row generated by the ajax call (CASE 2).

If its CASE 1 (AJAX within a setInterval) than don't - You are flooding your page with ajax calls very quickly (use firebug to see the list of calls)... in this case you can use a recursive ajax function that will call it self once its done.

If its CASE 2 - You mentiones an interval of 1ms and a ratio of 0-100 rows per call (lets assume 50), again you are creating a lot of functions and you are putting the system (memory, GC, Cycle handler) into hard work that may cause hanging and lag in your page... in this case consider using a "pool" object where your rows will be temporary stored and just one permanent interval function that will grab rows one by one and draw them to the page at the rate you want (don't forget to remove rows from the pool object).

If those cases don't match your approach than please consider showing us your code or the problematic page.

About the 24/7 and the table growth:

You should consider a paging mechanism or a page refresh policy because the larger the page is the more memory it requires - You are generating a very quickly growing table and no human can handle, read, understand that amount of data (at a rate of 1ms ~ 1 new row). you should be professional and make a more "user friendly" approach and maybe implement an infinite scroll style for loading new rows or dumping old ones.

Upvotes: 1

Related Questions