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/99.0.4844.84 Safari/537.36

Browser: Chrome 99

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
jQuery css	22451.0 Ops/sec
JS style	52870.2 Ops/sec
jQuery fastCss	42184.5 Ops/sec
jQuery fastMultipleCss	48321.9 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"});

Run results for: jQuery css vs JS style vs fastCss

jQuery css

JS style

jQuery fastCss

jQuery fastMultipleCss