Benchmark: 【JiangNanGame】style setting test 3

HTML Preparation code:

<div id="test" style='width:1px;height:1px;'></div>

Script Preparation code:

window.ele = document.getElementById("test");

window.SetStyle1 = (ele, json) => {
    const styleObject = ele.style;
    for (let key in json) {
        let value = json[key];
        styleObject[key] = value;
    }
    return ele;
};

window.SetStyle2 = (ele, json) => {
    const styleObject = ele.style;
    for (let key in json) {
        let value = json[key];
        styleObject.setProperty(key, value);
    }
    return ele;
};

window.SetStyle3 = (ele, json) => {
    let str = ele.style.cssText;
    for (let key in json) {
        let value = json[key];
        str += `${key}:${value};`;
    }
    ele.setAttribute('style', str);
    return ele;
};

window.SetStyle4 = (ele, json) => {
    let str = ele.style.cssText;
    for (let key in json) {
        let value = json[key];
        str += `${key}:${value};`;
    }
    ele.style.cssText = str;
    return ele;
};

window.myStyle = {
  color: "red",
  border: "1vmin solid red",
  padding: "0.5vmin",
  'background-color': "black",
  height: "1vh",
  width: "1vw",
  left: "100px",
};

Tests:

SetStyle1
let i = 0; while (i < 100000) { SetStyle1(ele, myStyle); i++; }
SetStyle2
let i = 0; while (i < 100000) { SetStyle2(ele, myStyle); i++; }
SetStyle3
let i = 0; while (i < 100000) { SetStyle3(ele, myStyle); i++; }
SetStyle4
let i = 0; while (i < 100000) { SetStyle4(ele, myStyle); i++; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
SetStyle1
SetStyle2
SetStyle3
SetStyle4

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year 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
SetStyle1	1.6 Ops/sec
SetStyle2	1.8 Ops/sec
SetStyle3	1.2 Ops/sec
SetStyle4	0.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring performance of different JavaScript styles is crucial for developers to optimize and ensure consistent user experience across various browsers and devices.

**Benchmark Overview**

The provided benchmark compares the performance of four different approaches to set CSS styles on an HTML element:

1. `SetStyle1`: Directly sets CSS properties using `style` object.
2. `SetStyle2`: Uses `setProperty` method to set CSS properties.
3. `SetStyle3`: Sets CSS properties by concatenating strings and assigning them to the `cssText` property.
4. `SetStyle4`: Similar to `SetStyle3`, but uses assignment to update the `style` object.

**Performance Comparison**

The benchmark measures the execution time of each test case on a desktop machine running Chrome 115. The results show that:

* `SetStyle2` is the fastest, with an average execution speed of 1.754 executions per second.
* `SetStyle1` follows closely, with an average execution speed of 1.598 executions per second.
* `SetStyle3` and `SetStyle4` are slower, with average execution speeds of 1.190 and 0.644 executions per second, respectively.

**Pros and Cons**

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

* **SetStyle1**: Fastest, but may not work in older browsers that don't support modern CSS properties.
	+ Pros: Fast, easy to implement.
	+ Cons: May break in older browsers.
* **SetStyle2**: Second-fastest, uses `setProperty` method which is widely supported.
	+ Pros: Wide browser support, relatively fast.
	+ Cons: Uses a different API than traditional CSS property setting.
* **SetStyle3**: Slowest, concatenates strings to set CSS properties, which can lead to performance issues.
	+ Pros: None notable.
	+ Cons: Performance-intensive, may break in older browsers.
* **SetStyle4**: Similar to `SetStyle3`, but uses assignment to update the `style` object.
	+ Pros: None notable.
	+ Cons: Performance-intensive, may break in older browsers.

**Library and Special Features**

None of the test cases use any libraries or special JavaScript features beyond standard ECMAScript syntax.

**Alternatives**

If you need to optimize performance in a specific context, consider the following alternatives:

* Use `css` module (e.g., using `import { css } from 'styled-components';`) for CSS-in-JS solutions, which can provide better performance and compatibility.
* Implement custom CSS rendering engines or libraries like `Fast-CSS` or `cssom-view`, which can optimize CSS property setting and parsing.
* Use WebAssembly (WASM) to compile your JavaScript code into a platform-agnostic binary format, which can improve performance in resource-constrained environments.

Keep in mind that the choice of approach depends on your specific use case, target audience, and desired trade-offs between performance, compatibility, and maintainability.

Related benchmarks:

【JiangNanGame】style setting test 3 (version: 7)

Comparing performance of: SetStyle1 vs SetStyle2 vs SetStyle3 vs SetStyle4

Created: one year ago by: Registered User

Jump to the latest result

SetStyle1

SetStyle2

SetStyle3

SetStyle4

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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