Benchmark: jQuery css vs JS style vs fastCss

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"});

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

Latest run results:

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

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/OS: Chrome 120 on Windows

View result in a separate tab

Test name	Executions per second
jQuery css	42454.1 Ops/sec
JS style	103913.0 Ops/sec
jQuery fastCss	82129.3 Ops/sec
jQuery fastMultipleCss	94599.5 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

The provided JSON represents a benchmarking test for measuring the performance of three different approaches to set CSS styles on HTML elements: jQuery's `css` method, JavaScript's inline style manipulation, and fastCSS (a library that allows you to set multiple CSS styles at once).

**Benchmark Definition**

The benchmark definition is a code snippet that demonstrates each approach. Here's a brief explanation:

1. **jQuery css**: This approach uses the jQuery `css` method to set individual CSS properties on the element.
2. **JS style**: This approach uses JavaScript's inline style manipulation to set multiple CSS properties on the element using the `style` property of the element object.
3. **jQuery fastCss**: This approach is similar to jQuery css, but it uses a custom `fastCss` method that sets multiple CSS properties at once.
4. **jQuery fastMultipleCss**: This approach uses the `fastMultipleCss` method provided by fastCSS to set multiple CSS styles on the element at once.

**Options Compared**

The benchmark compares the performance of each approach:

* jQuery css: Sets individual CSS properties using the jQuery `css` method
* JS style: Uses JavaScript's inline style manipulation to set multiple CSS properties on the element
* jQuery fastCss: Uses a custom `fastCss` method to set multiple CSS properties at once
* jQuery fastMultipleCss: Uses the `fastMultipleCss` method from fastCSS to set multiple CSS styles on the element at once

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **jQuery css**:
	* Pros: Easy to use, well-maintained library.
	* Cons: Can be slower due to the overhead of jQuery's methods.
2. **JS style**:
	* Pros: Fast and lightweight, no dependencies.
	* Cons: Requires manual property manipulation, can be error-prone.
3. **jQuery fastCss**:
	* Pros: Similar performance to jQuery css, but with a custom method.
	* Cons: Custom implementation may not be as well-maintained or widely adopted.
4. **jQuery fastMultipleCss**:
	* Pros: Fast and efficient, uses the popular fastCSS library.
	* Cons: Requires an external dependency (fastCSS).

**Library Usage**

In this benchmark, fastCSS is used to provide a custom `fastCss` method for setting multiple CSS properties at once. fastCSS is a lightweight library that allows you to set multiple CSS styles on an element using the `$()` syntax.

**Special JS Features/Syntax**

There are no special JavaScript features or syntax used in this benchmark beyond what's already mentioned (inline style manipulation).

Other Alternatives

If you're looking for alternative approaches, consider:

1. **CSSOM**: The Document Object Model allows you to manipulate CSS styles directly on an element using the `style` property.
2. **MutationObserver**: This API provides a more efficient way to observe changes to an element's styles.

These alternatives may offer different trade-offs in terms of performance, ease of use, and library dependencies.

Related benchmarks:

jQuery css vs JS style vs fastCss (version: 1)

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

Created: 4 years ago by: Registered User

Jump to the latest result

jQuery css

JS style

jQuery fastCss

jQuery fastMultipleCss

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):