3

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+.

  • 1
    have you done any code profiling? – charlietfl Dec 16 '12 at 18:22
  • 1
    What exactly do you mean by multithreading, are you talking about webworkers, and if not how exactly is javascript multithreaded, do you have anything to support that as I'm very curious as to how an event based language handles multithreading ? – adeneo Dec 16 '12 at 18:37
  • can you post some code that you think is slowing up? – Amitd Dec 16 '12 at 18:39
  • Nit: ECMAScript does not define threading. The assumption that MT is used here is wrong as it is not. Now, different ECMAScript/DOM/Rendering implementations act differently, but this has nothing to do with "JS multithreading" (which does not exist in this context). –  Dec 16 '12 at 19:06
  • @pst So this is a rendering issue? Should I edit to reflect that? If you think that's the reason for the different performances, would you mind putting that as answer? Thank-you! –  Dec 16 '12 at 19:09
  • profiling within console is not what you have described in defintiion. Research more about it perhaps on Firebug site – charlietfl Dec 16 '12 at 19:09

1 Answers1

2

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/