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

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0.3 Safari/605.1.15

Browser: Safari 12

Operating system: Mac OS X 10.13.6

Device Platform: Desktop

Date tested: 5 years ago

Test name	Executions per second
Style by property Fixed Values	801921.9 Ops/sec
Style by name Fixed Values	806416.7 Ops/sec
setAttribute Fixed Values	5550398.0 Ops/sec
setProperty Fixed Values	848153.9 Ops/sec
Style by property Single Random Value	501268.6 Ops/sec
Style by name Single Random Value	502762.2 Ops/sec
setAttribute Single Random Value	388770.0 Ops/sec
setProperty Single Random Value	513821.9 Ops/sec
Style by property All Random Values	243987.6 Ops/sec
Style by name All Random Values	245792.7 Ops/sec
setAttributey All Random Values	214647.4 Ops/sec
setProperty All Random Values	246887.3 Ops/sec

HTML Preparation code:

<div id="element" style="background:#555;color:#FFF;position:absolute;left:0;top:0;width:400px;height:100px;">
</div>

Script Preparation code:

  var elem = document.getElementById('element');
function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

Tests:

Style by property Fixed Values
elem.style.width = '500px'; elem.style.height = '50px'; elem.style.top = '40px'; elem.style.left = '90px';
Style by name Fixed Values
elem.style['width'] = '500px'; elem.style['height'] = '50px'; elem.style['top'] = '40px'; elem.style['left'] = '90px';
setAttribute Fixed Values
elem.setAttribute('style','width:500px;height:50px;top:40px;left:90px;');
setProperty Fixed Values
elem.style.setProperty('width', '500px'); elem.style.setProperty('height', '50px'); elem.style.setProperty('top', '40px'); elem.style.setProperty('left', '90px');
Style by property Single Random Value
elem.style.width = getRandomInt(500) + 'px'; elem.style.height = '50px'; elem.style.top = '40px'; elem.style.left = '90px';
Style by name Single Random Value
elem.style['width'] = getRandomInt(500) + 'px'; elem.style['height'] = '50px'; elem.style['top'] = '40px'; elem.style['left'] = '90px';
setAttribute Single Random Value
elem.setAttribute('style','width:' + getRandomInt(500) + 'px;height:50px;top:40px;left:90px;');
setProperty Single Random Value
elem.style.setProperty('width', getRandomInt(500) + 'px'); elem.style.setProperty('height', '50px'); elem.style.setProperty('top', '40px'); elem.style.setProperty('left', '90px');
Style by property All Random Values
elem.style.width = getRandomInt(500) + 'px'; elem.style.height = getRandomInt(50) + 'px'; elem.style.top = getRandomInt(40) + 'px'; elem.style.left = getRandomInt(90) + 'px';
Style by name All Random Values
elem.style['width'] = getRandomInt(500) + 'px'; elem.style['height'] = getRandomInt(50) + 'px'; elem.style['top'] = getRandomInt(40) + 'px'; elem.style['left'] = getRandomInt(90) + 'px';
setAttributey All Random Values
elem.setAttribute('style','width:' + getRandomInt(500) + 'px;height:' + getRandomInt(50) + 'px;top:' + getRandomInt(40) + 'px;left:' + getRandomInt(90) + 'px;');
setProperty All Random Values
elem.style.setProperty('width', getRandomInt(500) + 'px'); elem.style.setProperty('height', getRandomInt(50) + 'px'); elem.style.setProperty('top', getRandomInt(40) + 'px'); elem.style.setProperty('left', getRandomInt(90) + 'px');

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

Style by property Fixed Values

Style by name Fixed Values

setAttribute Fixed Values

setProperty Fixed Values

Style by property Single Random Value

Style by name Single Random Value

setAttribute Single Random Value

setProperty Single Random Value

Style by property All Random Values

Style by name All Random Values

setAttributey All Random Values

setProperty All Random Values