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_15_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.113 Safari/537.36
Chrome 81
Mac OS X 10.15.3
Desktop
5 years ago
Test name Executions per second
style by property 118.6 Ops/sec
style by name 123.3 Ops/sec
setAttribute 154.1 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;');
    }
    ​