Benchmark: style.display vs classList.toggle

HTML Preparation code:

<style type="text/css">
        .hide {
            display: none;
        }
</style>
<div id="foo"></div>

Tests:

classList.toggle
document.getElementById("foo").classList.toggle("hide"); document.getElementById("foo").classList.toggle("hide");
style.display
document.getElementById("foo").style.display = "none"; document.getElementById("foo").style.display = "block";

Rendered benchmark preparation results:

Previous results

Test case name	Result
classList.toggle
style.display

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

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Firefox 100 on Windows

Test name	Executions per second
classList.toggle	884908.2 Ops/sec
style.display	569827.4 Ops/sec

style.display vs classList.toggle (version: 0)