Scientific Research proves: Paul Irish is human!

Note: This is not about a turing test with Paul.

Last week I have have been on irc://irc.freenode.net/#jQuery to ask for an advice:

<khase> Best Practice Question: I currently add a custom enabled-attribute to a couple of spans. I preserve classes to be for styling only, as the enabled attr, is used for more things than just layout. Is one method faster/better than the other or is it just amatter of taste?
<thelaings> hey ppl
<timmywil> khase: which method are you using?
<erichynds> khase: creating custom attributes can cause memory leaks
<khase> i use attr for "enabled" and class for classes. :o
<thelaings> i'm trying to get a better understanding of .data
<timmywil> sounds right
<thelaings> is it only used for ajax or for data already on the page?
<ajpiano> thelaings: .data() is just a accessing a gigantic cache
<ajpiano> $.cache
<ajpiano> everything is stored in that cache
<BarelyFitz> erichynds: custom attributes causing memory leaks? isn't that only if you attach a javascript object to it?
<ajpiano> event handlers, and any arbitrary .data() that is assigned by you, jquery, or any plugins
<innociv> .data() is sort of like having <element CustomDataCacheProperty="">
<innociv> SORT OF.
<erichynds> BarelyFitz: I don't know the specifics - just what i've been told. that is entirely possible
<paul_irish> khase: classes are faster for traversing/selecting
<khase> h,
<khase> hm, gotta rethink my code then.
<innociv> faster than attr? Yeah.

It sounds likely that .class is faster that [attr]. I was curious and wrote a small test case.

Firefox 3.6, JIT enabled, more runs/s is better:



Create() addes 100 span childs to the body. Every second of these has the customattr-attribute set to "value". The rest has the class customclass. Using create(200,5) would create 200 spans of which each 5th has the custom attr instead of a class.

testClass tries to call $(".customclass") as often as possible within a second; obviously testAttr calls $("[customAttr]").

For some weird Firefox internal reason [attr] is slightly faster than .class. Using SRWareIron though, with the same settings, .class is faster:

testClass avg runs/sec: 31579

testAttr avg runs/sec: 29970

So what do we learn from this? Even though [attr] might be faster in some cases, do not ninja-optimize your classes to custom attributes! Classes should be the way to go for css and boolean data.

Last but not least: Paul Irish, you are wrong! :P But hat is what makes us human, so dont worry.


mfG Kambfhase

ps. Paul, you are awesome. What you do is awesome and yayQuery is So Just Cloud!