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

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

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

Created: 6 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>

AخA
 
<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));
}

 
  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';
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';
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;');
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');
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';
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';
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;');
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');
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';
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';
x

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;');
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');
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');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 6 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:65.0) Gecko/20100101 Firefox/65.0

Browser/OS: Firefox 65 on Mac OS X 10.13

View result in a separate tab

Test name	Executions per second
Style by property Fixed Values	306086.9 Ops/sec
Style by name Fixed Values	300384.0 Ops/sec
setAttribute Fixed Values	4202108.5 Ops/sec
setProperty Fixed Values	317651.8 Ops/sec
Style by property Single Random Value	382334.0 Ops/sec
Style by name Single Random Value	368277.0 Ops/sec
setAttribute Single Random Value	280518.4 Ops/sec
setProperty Single Random Value	392269.2 Ops/sec
Style by property All Random Values	238350.6 Ops/sec
Style by name All Random Values	272357.0 Ops/sec
setAttributey All Random Values	236938.0 Ops/sec
setProperty All Random Values	258566.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

A JSON object with browser test results!

After carefully examining the data, I'll provide an answer.

The browsers that are being tested are Firefox 65 on various devices (Desktop and Mac OS X) using different methods to set styles: setProperty, style by name, style by property, setAttribute, and others.

There is a correlation between the test names and their corresponding properties or methods. For example:

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

Each test has a unique combination of these styles and methods, which suggests that the tests are designed to cover different aspects of style setting in CSS.

Can you tell me more about what kind of analysis or insights you'd like me to extract from this data?

LLMs can make mistakes. Check important info.

A JSON object with browser test results!

After carefully examining the data, I'll provide an answer.

The browsers that are being tested are **Firefox 65** on various devices (Desktop and Mac OS X) using different methods to set styles: `setProperty`, `style` by name, `style` by property, `setAttribute`, and others.

There is a correlation between the test names and their corresponding properties or methods. For example:

* `Style by property Single Random Value`
* `Style by name Single Random Value`
* `setProperty Fixed Values`
* `Style by property Fixed Values`
* `Style by name Fixed Values`
* `setAttribute Single Random Value`
* `Style by name All Random Values`
* `setProperty All Random Values`
* `Style by property All Random Values`
* `setAttributey All Random Values`

Each test has a unique combination of these styles and methods, which suggests that the tests are designed to cover different aspects of style setting in CSS.

Can you tell me more about what kind of analysis or insights you'd like me to extract from this data?

Related benchmarks: