MeasureThat.net

Run results for: Set style vs setAtrribute("style") 2

Go to the benchmark
Run details:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:65.0) Gecko/20100101 Firefox/65.0
Firefox 65
Mac OS X 10.13
Desktop
6 years ago
Test name Executions per second
style by property 323.5 Ops/sec
style by name 330.4 Ops/sec
setAttribute 270.8 Ops/sec
HTML Preparation code:
AخA
 
1
<div id="element" style="background:#555;color:#FFF;position:absolute;left:0;top:0;width:400px;height:100px;">
2
</div>
Script Preparation code:
 
  var elem = document.getElementById('element');
Tests:

  • style by property

    ​x
     
    for (var i = 0; i< 1000 ; i++){
        elem.style.width = i + 'px';
        elem.style.height = i + 'px';
        elem.style.top = i + 'px';
        elem.style.left = i + 'px';
    }
    ​

  • style by name

     
    for (var i = 0; i< 1000 ; i++){
        elem.style['width'] = i + 'px';
        elem.style['height'] = i + 'px';
        elem.style['top'] = i + 'px';
        elem.style['left'] = i + 'px';
    }
    ​

  • setAttribute

     
    for (var i = 0; i< 1000 ; i++){
        elem.setAttribute('style','width:' + i + 'px;height:' + i + 'px;top:' + i + 'px;left:' + i + 'px;');
    }
    ​