jQuery 1.3 First Impressions January 14th, 2009
So I see this update by John Resig on twitter and I get up early the next morning to check it out. The release notes (linked above) are quite an interesting read, if you're into that sort of thing. With the insane performance improvements all over the place, I didn't want to waste any time upgrading my little corner of the web to the newest version. Here's what I found.
Browser Detection is Deprecated
While I agree that
$.browser is smelly it isn't always
practical to limit yourself to feature/bug detection. For example, this
site gets somewhere in the vicinity of 5% IE users. If some slidey effect
is being insane in IE, I can just 'comment' out that effect for IE and
everyone is happy. There's no 'feature' or 'bug' I'm really working around.
It's just that this combination of markup, style and animation don't mix
well in IE, so why fight it?
Of course, since it's only deprecated and not removed, I can continue using it for now where it makes sense (and in flot, where it's used all over the place). I could also eventually pull out the relevant code from jQuery 1.2.6 and include it plugin-style. No harm done.
It's Pretty Fast!
Benchmarks aside, I can't really put my finger on what's faster, it just...
it has that certain something that makes it feel snappier. Flot is a good
place to get that feel — the
onmouseover code makes the
browser feel a lot less sluggish.
Certainly one of the biggest improvements is in CSS selectors. The new engine is a real step in the right direction and you can feel the difference, especially for 'common' selections. I did a very unscientific test, here are the results:
|jQuery 1.2.6||jQuery 1.3.0||prototype 188.8.131.52|
|Time||0.411 ms||0.271 ms||1.162 ms|
Speaking of flot, all of the
worked fine after simply changing the page to include 1.3. That's really
handy. All of my simpler code used on this site also worked without needing
a single change (you're using it right now!).
I was able to find one thing in the new version that required a change to my
code... and that's pre-built animations like
you've ever written any jQuery and tried to collapse and expand elements
you'll probably be familiar with the issue of
margin properties instantly collapsing/expanding at the
end/beginning of animations.
This is because the
height attribute is the only one that is
getting decremented. Once it gets to
0px high, jQuery calls
hide() on the element. If there are still some paddings and
such on the element at that time it sort of just snaps closed, quite
So normally you'd have to consider this while building your markup and put the paddings and margins on elements inside the element you'd be animating closed. Well, in jQuery 1.3 that is not the case. Now, padding and margin attributes are animated in the same way as height is! Joy.
Yep. My jQuery 1.2.x mindset caused me to account for this animation issue
in my markup, causing 1.3 to make it look funny. Fortunately it's as simple
as changing the code from using a pre-built animator to the 'primitive'
animate function directly instead. This is what you should do if
you've already built the markup to handle the situation.
jQuery 1.3 is certainly an improvement, and not just an incremental one. The
performance aspect is the most interesting to me. But also interesting is the
growing controversy over the new selector engine
The MooTools guys have been doing their usual
ranting on the subject.
It will be interesting to see if perhaps the new engine can get into other
prominent frameworks. Personally I'd love to see jQuery style selectors make
it into prototype. Partially because prototype is so freakin' slow, but also
just because I like the jQuery style better. What is with
$('some_id') instead of just
$('#some_id')? We could
get rid of the
$$ awkwardness! But this is an entirely different
discussion for another day :)
Some social stuff: