How to Improve jQuery animation performance? [closed]

Question

My sites are pretty much all AJAX now, and I'm pushing jQuery animations to the limit.

Using dynamic pagination & jQuery animate looks terrible on all browsers except Chrome and IE9+.

My guess is that this is because Chrome (IE9+?) is the only browser that has JS multithreading or multithreading enabled by default.

Is it possible to even turn it on on other browsers in the JS/HTML/etc?

Many thanks in advance!

Profiling

I'm notoriously bad with vocab, so I didn't understand this term at first.

Yes, I constantly look for better ways to improve my code. For speed such as cloning rather than appending stringed html, selecting multiple elements at once, etc.

It simply works smoothly in Chrome and IE9+, poorly in everything else (the worst in default Android 2.2 and iPhone mobile browsers).

Multithreading

I got it from here and went with it since it made sense. If it's wrong, please let me know, and I'll edit the question for appropriateness.

My dynamic pagination

Basically, I append cloned opacity:0 absolute divs to a relative container via a for loop. Some subdivs within the cloned div may also be cloned since I have more subrows also via a for loop. I top it to an accumulated height, adding 10px to each appended div. Once it's ready, I animate to opacity:1. If an absolute needs to stay there, its' top is simply animated with no other changes.

All animations 500ms. All divs preformatted with CSS. No images. It's as straightforward as I can hope to make it, and it works beautifully in Chrome and IE9+.

Answer 1

Profile your code, maybe use the built in tools that Safari has, to verify animations ( or dynamic pagination) are causing the issue. Consider writing some of your jQuery animations in pure JavaScript. I re-wrote the fade function using about 10% of the code that jQuery uses, but with the trade-off that it is targeted for modern browsers only.

Performance Boosts per Joe:

http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/