style vs cssText vs setAttribute (v10)

Revision 10 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
    #test div {
        float:left;
        }
</style>

<div id="test"></div>

Setup

var $test = $("#test")
      , cssText = typeof(document.createElement("div").style.cssText) != "undefined"
      , elems = []
      , el
      , text
      , count = 0
    
    test.innerHTML = ""
    
    for (var i=0; i<100; i++) {
        var el = $("<div>")
        elems.push(el)
        $test.append(el)
    }

Test runner

Ready to run.

Testing in
TestOps/sec
style
for (var i=0; i<100; i++) {
    el = elems[i][0]
    el.style.webkitTransform= "translate3d("+10+"px, "+10+"px, 0) scale3d("+10+", "+10+", 1)"
    el.style.mozTransform= "translate3d("+10+"px, "+10+"px, 0) scale3d("+10+", "+10+", 1)"
    el.style.transform= "translate3d("+10+"px, "+10+"px, 0) scale3d("+10+", "+10+", 1)"
}
 
ready
cssText
if (!cssText) {
    Benchmark.abort()
}

for (var i=0; i<100; i++) {
    el = elems[i][0]
       text = "el.style.webkitTransform: translate3d("+10+"px, "+10+"px, 0) scale3d("+10+", "+10+", 1)"+
"el.style.mozTransform: translate3d("+10+"px, "+10+"px, 0) scale3d("+10+", "+10+", 1)"+
    "el.style.transform: translate3d("+10+"px, "+10+"px, 0) scale3d("+10+", "+10+", 1)"

    el.style.cssText = text
}
ready
setAttribute
for (var i=0; i<100; i++) {
    el = elems[i][0]
    text = "el.style.webkitTransform: translate3d("+10+"px, "+10+"px, 0) scale3d("+10+", "+10+", 1)"+
"el.style.mozTransform: translate3d("+10+"px, "+10+"px, 0) scale3d("+10+", "+10+", 1)"+
    "el.style.transform: translate3d("+10+"px, "+10+"px, 0) scale3d("+10+", "+10+", 1)"

    el.setAttribute("style", text)
}
ready
jQuery.css
for (var i=0; i<100; i++) {
    elems[i].css({'-webkit-transform': "translate3d("+10+"px, "+10+"px, 0) scale3d("+10+", "+10+", 1)",
                        '-moz-transform': "translate3d("+10+"px, "+10+"px, 0) scale3d("+10+", "+10+", 1)",
                        'transform': "translate3d("+10+"px, "+10+"px, 0) scale3d("+10+", "+10+", 1)"
                 })
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.