It has been my observation that, when animating a lot of elements,
jQuery does so by manipulating the style attribute of each element to
be animated directly. Accessign DOM attributes tends to be relitively
slow in most browsers, and if you're applying an effect to a large
number of elements, this can really tell as animations that were
smooth for small numbers of elements grow increasingly choppy.
An idea occured to me, maybe it would be possible to use stylesheet
rules for animating elements instead of manipulating the DOM style
attribute directly. Of course this wouldn't be practical in all
circumstances, but it could lead to dramatic speedups in the
circumstances where it could be applied.
Foe example: Consider $('.someclass').fadeOut ('slow') as an example.
In current versions of jQuery all elements that match the selector get
an opacity value attached to their style attribute, which is then
decremented down to 0 to produce the fadeout effect. This is fine
when dealign with 10 or 20 elements, but when you're dealing with more
than 100 the results are choppy enough that in some circumstances it
can appear as if no animation took place at all and the elements were
simply hidden.
now suppose that instead of doing that the jQuery library minipulated
the .someclass rule directly (or created one if it didn't exist), now
there would only be 1 value that would have to be decremented for the
fadeout to happen instead of (number of elements) values. This would
eliminate a lot of DOM access overhead, and would hopefully mitigate
the choppiness problem when working with a lot of elements. Of course
doing a lot of complex animation would cause choppiness no matter what
you did, but a stylesheet rules based approach might stave off the
threshold between an acceptible level and unacceptible level to a
considerably higher level.
What do you think? Can something like this be done in a future
version of jQuery? Would it be possible/practical? Would the
elimated DOM overhead be worth it?
