Benchmark: style➜display/backgroundColor VS setAttribute➜display/backgroundColor

HTML Preparation code:

<div id="foo"></div>

Tests:

style➜display
document.getElementById("foo").style.display = "none"; document.getElementById("foo").style.backgroundColor = "red";
setAttribute➜display
document.getElementById("foo").setAttribute('style', 'background-color:red;display:none;');

Rendered benchmark preparation results:

Previous results

Test case name	Result
style➜display
setAttribute➜display

ⓘ Get performance results from real users on your website with Request Metrics.

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3400.0 Safari/537.36

Browser/OS: Chrome 68 on Windows 8.1

Test name	Executions per second
style➜display	710745.1 Ops/sec
setAttribute➜display	689371.5 Ops/sec

style➜display/backgroundColor VS setAttribute➜display/backgroundColor (version: 0)