title: Save object states in .data or attr - Performance vs CSS?
body: <p>In response to my <a href="https://stackoverflow.com/a/9777624/1219121">answer yesterday</a> about rotating an Image, <a href="https://stackoverflow.com/users/496735/jamund-ferguson">Jamund</a> told me to use <code>.data()</code> instead of <code>.attr()</code></p>
  
  <p>First I thought that he is right, <strong>but then I thought about a bigger context</strong>... Is it always better to use <code>.data()</code> instead of <code>.attr()</code>? I looked in some other posts like <a href="https://stackoverflow.com/questions/4609071/what-is-better-data-or-attr">what-is-better-data-or-attr</a> or <a href="https://stackoverflow.com/questions/9444679/jquery-data-vs-attrdata">jquery-data-vs-attrdata</a></p>
  
  <p>The answers were not satisfactory for me...</p>
  
  <p>So I moved on and <a href="http://jsfiddle.net/vYB5r/4/" rel="nofollow noreferrer">edited the example</a> by <strong>adding CSS.</strong> I thought it might be useful to make a different Style on each image if it rotates. My style was the following:</p>
  
  <pre><code>.rp[data-rotate="0"] {
      border:10px solid #FF0000;
  }
  .rp[data-rotate="90"] {
      border:10px solid #00FF00;
  }
  .rp[data-rotate="180"] {
      border:10px solid #0000FF;
  }
  .rp[data-rotate="270"] {
      border:10px solid #00FF00;
  }
  </code></pre>
  
  <p>Because design and coding are often separated, it could be a nice feature to handle this in CSS instead of adding this functionality into JavaScript. Also in my case the <code>data-rotate</code> is like a <strong>special state</strong> which the <strong>image currently has</strong>. So in my opinion it make sense to represent it within the DOM.</p>
  
  <p>I also thought this could be a case where it is much better to save with <code>.attr()</code> then with <code>.data()</code>. <em>Never mentioned before in one of the posts I read.</em></p>
  
  <p><strong>But then i thought about performance.</strong> Which function is <strong>faster</strong>? I built my own test following:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;test&lt;/title&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  function runfirst(dobj,dname){
    console.log("runfirst "+dname);
    console.time(dname+"-attr");
    for(i=0;i&lt;10000;i++){
      dobj.attr("data-test","a"+i);
    }
    console.timeEnd(dname+"-attr");
    console.time(dname+"-data");
    for(i=0;i&lt;10000;i++){
      dobj.data("data-test","a"+i);
    }
    console.timeEnd(dname+"-data");
  }
  function runlast(dobj,dname){
    console.log("runlast "+dname);
    console.time(dname+"-data");
    for(i=0;i&lt;10000;i++){
      dobj.data("data-test","a"+i);
    }
    console.timeEnd(dname+"-data");
    console.time(dname+"-attr");
    for(i=0;i&lt;10000;i++){
      dobj.attr("data-test","a"+i);
    }
    console.timeEnd(dname+"-attr");  
  }
  $().ready(function() {
    runfirst($("#rp4"),"#rp4");
    runfirst($("#rp3"),"#rp3");
    runlast($("#rp2"),"#rp2");
    runlast($("#rp1"),"#rp1");
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="rp1"&gt;Testdiv 1&lt;/div&gt;
      &lt;div id="rp2" data-test="1"&gt;Testdiv 2&lt;/div&gt;
      &lt;div id="rp3"&gt;Testdiv 3&lt;/div&gt;
      &lt;div id="rp4" data-test="1"&gt;Testdiv 4&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It should also show if there is a difference with a predefined <code>data-test</code> or not.</p>
  
  <p>One result was this:</p>
  
  <pre><code>runfirst #rp4
  #rp4-attr: 515ms
  #rp4-data: 268ms
  runfirst #rp3
  #rp3-attr: 505ms
  #rp3-data: 264ms
  runlast #rp2
  #rp2-data: 260ms
  #rp2-attr: 521ms
  runlast #rp1
  #rp1-data: 284ms
  #rp1-attr: 525ms
  </code></pre>
  
  <p>So the <code>.attr()</code> function did always need more time than the <code>.data()</code> function. This is an argument for <code>.data()</code> I thought. Because performance is always an argument!</p>
  
  <p>Then I wanted to post my results here with some questions, and in the act of writing I compared with the questions Stack Overflow showed me (similar titles)</p>
  
  <p>And true enough, there was one <a href="https://stackoverflow.com/q/3476497/1219121">interesting post about performance</a></p>
  
  <p>I read it and run their example. And now I am confused! <strong>This test showed that <code>.data()</code> is slower then <code>.attr()</code> !?!! Why is that so?</strong></p>
  
  <p>First I thought it is because of a different jQuery library so I edited it and <a href="http://jsbin.com/uyuwoc/3/" rel="nofollow noreferrer">saved the new one</a>. But the result wasn't changing...</p>
  
  <p>So now my questions to you:</p>
  
  <ul>
  <li>Why are there some differences in the performance in these two examples?</li>
  <li>Would you prefer to use data- HTML5 attributes instead of data, if it represents a state? Although it wouldn't be needed at the time of coding? Why - Why not?</li>
  </ul>
  
  <p>Now depending on the performance:</p>
  
  <ul>
  <li>Would performance be an argument for you using <code>.attr()</code> instead of data, if it shows that <code>.attr()</code> is better? Although data is meant to be used for <code>.data()</code>?</li>
  </ul>
  
  <p><strong>UPDATE 1:</strong><br>
  I did see that without overhead <code>.data()</code> is much faster. Misinterpreted the data :)  But I'm more interested in my second question. :)</p>
  
  <blockquote>
    <p>Would you prefer to use data- HTML5 attributes instead of data, if it
    represents a state? Although it wouldn't be needed at the time of
    coding? Why - Why not?</p>
  </blockquote>
  
  <p>Are there some other reasons you can think of, to use <code>.attr()</code> and not <code>.data()</code>? e.g. interoperability? because <code>.data()</code> is jquery style and HTML Attributes can be read by all...</p>
  
  <p><strong>UPDATE 2:</strong></p>
  
  <p>As we see from <a href="https://stackoverflow.com/users/157247/t-j-crowder">T.J Crowder</a>'s <a href="http://jsperf.com/jquery-setting-attr-vs-data" rel="nofollow noreferrer">speed test</a> in <a href="https://stackoverflow.com/a/9783831/1219121">his answer</a> <code>attr</code> is much faster then <code>data</code>! which is again confusing me :) But please! Performance is an argument, but not the highest! So give answers to my other questions please too!</p>
  
  <p><strong>UPDATE 3:</strong></p>
  
  <p>My test seems to be false because of the <a href="https://addons.mozilla.org/de/firefox/addon/firebug/" rel="nofollow noreferrer">fire-bug</a> I used while testing! The same file in chrome listed <code>attr</code> faster and a second test on <a href="http://jsperf.com/jquery-attr-vs-data1" rel="nofollow noreferrer">jsperf</a> also says <code>attr</code> is faster</p>