Run results for: jQuery css vs JS style vs fastCss

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0

Browser: Chrome 120

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Benchmark engine: Benchmark.js

JS style

104K/s

jQuery fastMultipleCss

95K/s

jQuery fastCss

82K/s

jQuery css

42K/s

View exact numbers

Test name	Executions per second
✓ JS style	103,913 Ops/sec
jQuery fastMultipleCss	94,599 Ops/sec
jQuery fastCss	82,129 Ops/sec
jQuery css	42,454 Ops/sec

HTML Preparation code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="a" style="height: 100vh; width: 100vw; margin-top: 100px;"></div>
<div class="a" style="height: 100vh; width: 100vw; margin-top: 100px;"></div>
<div class="a" style="height: 100vh; width: 100vw; margin-top: 100px;"></div>
<div class="a" style="height: 100vh; width: 100vw; margin-top: 100px;"></div>
<div class="a" style="height: 100vh; width: 100vw; margin-top: 100px;"></div>
<div class="a" style="height: 100vh; width: 100vw; margin-top: 100px;"></div>
<div class="a" style="height: 100vh; width: 100vw; margin-top: 100px;"></div>

Script Preparation code:

jQuery.fn.fastCss = function(property, value)
{
    this.each(function(){
        const v = $(this)[0];
        v.style[property] = value;
    });
}

jQuery.fn.fastMultipleCss = function(obj)
{
    this.each(function(){
        const v = $(this)[0];

        for (const [key, value] of Object.entries(obj))
            v.style[key] = value;
    });
}

Tests:

jQuery css
const a = $(".a"); a.css("height", "100vh"); a.css("width", "100vw"); a.css("margin-top", "50px");
JS style
const a = $(".a"); a.each(function(){ const v = $(this)[0]; v.style.height = "100vh"; v.style.width = "100vw"; v.style["margin-top"] = "50px"; });
jQuery fastCss
const a = $(".a"); a.fastCss("height", "100vh"); a.fastCss("width", "100vw"); a.fastCss("margin-top", "50px");
jQuery fastMultipleCss
const a = $(".a"); a.fastMultipleCss({height: "100vh", width: "100vw", "margin-top": "50px"});