jQuery - readability vs. performance(?)

Question

Considering the to fragments of jQuery code which does the same:

$("<div />").css({
  "background-color" : "red",
  "color" : "white",
  "border" : "solid 1px black" })
  .appendTo( someElement );

and

$("<div style='background-color:red;color:white;border:solid 1px black' />")
  .appendTo( someElement );

The first one is more readable in my opinion, but is there a performance difference between the two? Or is the performance difference so small that readability should go before the explicit tag declaration?

[Edit: clarification]

Using css and style is just an example. It could be adding numerous other attributes/values as well.

Answer 1

Well....it depends. If you're inserting it a lot, the second is faster, because there is less repeated work (but more parsing initially...and this part depends on the browser, whether parsing or explicitly setting the CSS is faster).

The html string you're using is cached as a document fragment, re-used for future insertions, so the second will have that entire string styles and all ready to clone immediately, rather than setting styles each time, so in a loop it's much faster.

Unfortunately, because of this caching, it's hard to test, because the best way to test...a repeated loop, it's optimized for. Here's a quick test demo that works in Chrome or Firefox/Firebug, just open your console to see the results (the page will lag while it opens...running the tests):

http://jsfiddle.net/XAece/

In this test, on my machine for 100,000 iterations in Chrome:

• .css() method: 4654ms
• inline style method: 4056ms
• $(html, props) method: 5816ms

For Firefox:

• .css() method: 8648ms
• inline style method: 3371ms
• $(html, props) method: 10250ms

---

As a side note, there's another method (third in the above test), $(html, props), where you can attach event handlers, use text to get encoded inner text, etc:

$("<div />", { 
  css: { "background-color" : "red",
         "color" : "white",
         "border" : "solid 1px black" },
  click: function() { alert('You clicked me!'); }
}).appendTo( someElement );