Benchmark: Set style vs setAtrribute("style") 5

Set style vs setAtrribute("style") 5 (version: 0)

Comparing performance of: setProperty Single Random Value vs setProperty All Random Values vs setAttribute Fixed Values vs setAttribute Single Random Value vs setAttributey All Random Values vs Style by name Fixed Values vs Style by name Single Random Value vs Style by name All Random Values vs Style by property Fixed Values vs Style by property Single Random Value vs Style by property All Random Values

Created: 7 years ago by: Guest

Jump to the latest result

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:

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');
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');
setAttribute Fixed Values
elem.setAttribute('style','width:500px;height:50px;top:40px;left:90px;');
setAttribute Single Random Value
elem.setAttribute('style','width:' + getRandomInt(500) + 'px;height:50px;top:40px;left:90px;');
setAttributey All Random Values
elem.setAttribute('style','width:' + getRandomInt(500) + 'px;height:' + getRandomInt(50) + 'px;top:' + getRandomInt(40) + 'px;left:' + getRandomInt(90) + 'px;');
Style by name Fixed Values
elem.style['width'] = '500px'; 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';
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';
Style by property Fixed Values
elem.style.width = '500px'; elem.style.height = '50px'; elem.style.top = '40px'; elem.style.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 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';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
setProperty Single Random Value
setProperty All Random Values
setAttribute Fixed Values
setAttribute Single Random Value
setAttributey All Random Values
Style by name Fixed Values
Style by name Single Random Value
Style by name All Random Values
Style by property Fixed Values
Style by property Single Random Value
Style by property All Random Values

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Related benchmarks: