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

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

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

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;');
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;');
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;');
Style by name Fixed Values
elem.style['width'] = '500px'; elem.style['height'] = '50px'; elem.style['top'] = '40px'; elem.style['left'] = '90px';
x

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

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

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

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0

Browser/OS: Firefox 95 on Windows

View result in a separate tab

Test name	Executions per second
setProperty Single Random Value	422795.5 Ops/sec
setProperty All Random Values	253606.4 Ops/sec
setAttribute Fixed Values	4573749.0 Ops/sec
setAttribute Single Random Value	318334.6 Ops/sec
setAttributey All Random Values	294487.6 Ops/sec
Style by name Fixed Values	392343.0 Ops/sec
Style by name Single Random Value	467484.8 Ops/sec
Style by name All Random Values	276566.9 Ops/sec
Style by property Fixed Values	384515.1 Ops/sec
Style by property Single Random Value	445781.1 Ops/sec
Style by property All Random Values	273768.3 Ops/sec

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

It looks like you've provided a JSON string, but it's not well-formatted and is missing the opening bracket that starts the array.

Assuming this is a valid JSON string, I'll help you parse it:

[
    {
        "RawUAString": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0",
        "Browser": "Firefox 95",
        "DevicePlatform": "Desktop",
        "OperatingSystem": "Windows",
        "ExecutionsPerSecond": 4573749.0,
        "TestName": "setAttribute Fixed Values"
    },
    {
        "RawUAString": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0",
        "Browser": "Firefox 95",
        "DevicePlatform": "Desktop",
        "OperatingSystem": "Windows",
        "ExecutionsPerSecond": 467484.75,
        "TestName": "Style by name Single Random Value"
    },
    {
        "RawUAString": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0",
        "Browser": "Firefox 95",
        "DevicePlatform": "Desktop",
        "OperatingSystem": "Windows",
        "ExecutionsPerSecond": 445781.09375,
        "TestName": "Style by property Single Random Value"
    },
    {
        "RawUAString": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0",
        "Browser": "Firefox 95",
        "DevicePlatform": "Desktop",
        "OperatingSystem": "Windows",
        "ExecutionsPerSecond": 422795.53125,
        "TestName": "setProperty Single Random Value"
    },
    {
        "RawUAString": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0",
        "Browser": "Firefox 95",
        "DevicePlatform": "Desktop",
        "OperatingSystem": "Windows",
        "ExecutionsPerSecond": 392343.03125,
        "TestName": "Style by name Fixed Values"
    },
    {
        "RawUAString": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0",
        "Browser": "Firefox 95",
        "DevicePlatform": "Desktop",
        "OperatingSystem": "Windows",
        "ExecutionsPerSecond": 384515.0625,
        "TestName": "Style by property Fixed Values"
    },
    {
        "RawUAString": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0",
        "Browser": "Firefox 95",
        "DevicePlatform": "Desktop",
        "OperatingSystem": "Windows",
        "ExecutionsPerSecond": 318334.625,
        "TestName": "setAttribute Single Random Value"
    },
    {
        "RawUAString": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0",
        "Browser": "Firefox 95",
        "DevicePlatform": "Desktop",
        "OperatingSystem": "Windows",
        "ExecutionsPerSecond": 294487.625,
        "TestName": "setAttributey All Random Values"
    },
    {
        "RawUAString": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0",
        "Browser": "Firefox 95",
        "DevicePlatform": "Desktop",
        "OperatingSystem": "Windows",
        "ExecutionsPerSecond": 276566.875,
        "TestName": "Style by name All Random Values"
    },
    {
        "RawUAString": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0",
        "Browser": "Firefox 95",
        "DevicePlatform": "Desktop",
        "OperatingSystem": "Windows",
        "ExecutionsPerSecond": 273768.34375,
        "TestName": "Style by property All Random Values"
    },
    {
        "RawUAString": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0",
        "Browser": "Firefox 95",
        "DevicePlatform": "Desktop",
        "OperatingSystem": "Windows",
        "ExecutionsPerSecond": 273768.34375,
        "TestName": "Style by property All Random Values"
    }
]

The last entry has a duplicate key-value pair, which is not allowed in JSON.

Please provide more context or clarify what you're trying to accomplish with this data. I'll be happy to help!

LLMs can make mistakes. Check important info.

It looks like you've provided a JSON string, but it's not well-formatted and is missing the opening bracket that starts the array.

Assuming this is a valid JSON string, I'll help you parse it:

```json
[
    {
        "RawUAString": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0",
        "Browser": "Firefox 95",
        "DevicePlatform": "Desktop",
        "OperatingSystem": "Windows",
        "ExecutionsPerSecond": 4573749.0,
        "TestName": "setAttribute Fixed Values"
    },
    {
        "RawUAString": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0",
        "Browser": "Firefox 95",
        "DevicePlatform": "Desktop",
        "OperatingSystem": "Windows",
        "ExecutionsPerSecond": 467484.75,
        "TestName": "Style by name Single Random Value"
    },
    {
        "RawUAString": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0",
        "Browser": "Firefox 95",
        "DevicePlatform": "Desktop",
        "OperatingSystem": "Windows",
        "ExecutionsPerSecond": 445781.09375,
        "TestName": "Style by property Single Random Value"
    },
    {
        "RawUAString": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0",
        "Browser": "Firefox 95",
        "DevicePlatform": "Desktop",
        "OperatingSystem": "Windows",
        "ExecutionsPerSecond": 422795.53125,
        "TestName": "setProperty Single Random Value"
    },
    {
        "RawUAString": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0",
        "Browser": "Firefox 95",
        "DevicePlatform": "Desktop",
        "OperatingSystem": "Windows",
        "ExecutionsPerSecond": 392343.03125,
        "TestName": "Style by name Fixed Values"
    },
    {
        "RawUAString": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0",
        "Browser": "Firefox 95",
        "DevicePlatform": "Desktop",
        "OperatingSystem": "Windows",
        "ExecutionsPerSecond": 384515.0625,
        "TestName": "Style by property Fixed Values"
    },
    {
        "RawUAString": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0",
        "Browser": "Firefox 95",
        "DevicePlatform": "Desktop",
        "OperatingSystem": "Windows",
        "ExecutionsPerSecond": 318334.625,
        "TestName": "setAttribute Single Random Value"
    },
    {
        "RawUAString": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0",
        "Browser": "Firefox 95",
        "DevicePlatform": "Desktop",
        "OperatingSystem": "Windows",
        "ExecutionsPerSecond": 294487.625,
        "TestName": "setAttributey All Random Values"
    },
    {
        "RawUAString": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0",
        "Browser": "Firefox 95",
        "DevicePlatform": "Desktop",
        "OperatingSystem": "Windows",
        "ExecutionsPerSecond": 276566.875,
        "TestName": "Style by name All Random Values"
    },
    {
        "RawUAString": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0",
        "Browser": "Firefox 95",
        "DevicePlatform": "Desktop",
        "OperatingSystem": "Windows",
        "ExecutionsPerSecond": 273768.34375,
        "TestName": "Style by property All Random Values"
    },
    {
        "RawUAString": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0",
        "Browser": "Firefox 95",
        "DevicePlatform": "Desktop",
        "OperatingSystem": "Windows",
        "ExecutionsPerSecond": 273768.34375,
        "TestName": "Style by property All Random Values"
    }
]
```

The last entry has a duplicate key-value pair, which is not allowed in JSON.

Please provide more context or clarify what you're trying to accomplish with this data. I'll be happy to help!

Related benchmarks: