Benchmark: jQuery css vs JS style vs fastCss (3)

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(){
        this.style[property] = value;
    });
}

jQuery.fn.fastMultipleCss = function(obj)
{
    this.each(function(){
        for (const [key, value] of Object.entries(obj))
            this.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(){ this.style.height = "100vh"; this.style.width = "100vw"; this.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"});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
jQuery css
JS style
jQuery fastCss
jQuery fastMultipleCss

Fastest: N/A

Slowest: N/A

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

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 9 months ago)

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

Browser/OS: Chrome 115 on Windows

View result in a separate tab

Test name	Executions per second
jQuery css	26068.7 Ops/sec
JS style	74796.7 Ops/sec
jQuery fastCss	74351.4 Ops/sec
jQuery fastMultipleCss	65832.4 Ops/sec

jQuery css vs JS style vs fastCss (3) (version: 0)

Comparing performance of: jQuery css vs JS style vs jQuery fastCss vs jQuery fastMultipleCss

Created: 9 months ago by: Guest

Jump to the latest result

jQuery css

JS style

jQuery fastCss

jQuery fastMultipleCss

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A