Benchmark: CssText vs Styling vs classList add

HTML Preparation code:

<div id="myid">hi</div>
<style>
    .wide {
      width: 100px;
    }
    .long {
      left: 100px;
      height: 100px;
    }
    .blue {
      top: 100px;
    }
</style>

Script Preparation code:

var a = document.getElementById("myid");
a.style.position = "absolute";

Tests:

csstext
a.style.cssText += "left: 100px ;top: 100px; width: 100px; height: 100px";
styling
a.style.left = "100px" a.style.top = "100px" a.style.width = "100px" a.style.height = "100px"
classList add
a.classList.add('wide','long','blue')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
csstext
styling
classList add

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 18 on iOS 18.3

View result in a separate tab

Test name	Executions per second
csstext	688349.1 Ops/sec
styling	4187560.8 Ops/sec
classList add	11162162.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark test on the MeasureThat.net website. The benchmark compares three approaches to set CSS styles on an HTML element:

1. **CssText**: Using the `cssText` property to concatenate and set multiple CSS properties at once.
2. **Styling**: Setting individual CSS properties using dot notation (e.g., `a.style.left = "100px"`).
3. **classList add**: Adding class names to the element's class list and then setting styles using those classes.

**Options Compared**

Each test case measures the execution time of a specific approach, allowing users to compare their performance on different methods.

**Pros and Cons of Each Approach:**

1. **CssText**
	* Pros:
		+ Faster, as it minimizes the number of property lookups.
		+ Reduces DOM mutations.
	* Cons:
		+ More complex syntax.
2. **Styling**
	* Pros:
		+ Easier to read and maintain.
		+ Familiar syntax for developers.
	* Cons:
		+ Slower, due to multiple property lookups and assignments.
3. **classList add**
	* Pros:
		+ Less error-prone, as it's a more declarative approach.
		+ Can be used with other CSS APIs (e.g., `classList.contains()`).
	* Cons:
		+ Slower, due to class list manipulation.

**Library and Syntax**

The benchmark uses the `classList` API, which is a modern feature introduced in HTML5. The `classList.add()` method adds one or more classes to an element's class list.

**Special JS Feature/Syntax**

None mentioned in this specific benchmark.

**Other Alternatives**

Other approaches to set CSS styles on an HTML element include:

1. **inline styles**: Setting styles directly on the `style` attribute of an element (e.g., `a.style.position = "absolute"`).
2. **CSS classes with vendor prefixes**: Using class names with vendor-specific prefixes (e.g., `-webkit-`) to apply cross-browser compatibility.
3. **CSS variables**: Using CSS variables (also known as custom properties) to define and reuse values.

Each of these alternatives has its own trade-offs, pros, and cons, which may be worth exploring depending on specific use cases or requirements.

Related benchmarks:

CssText vs Styling vs classList add (version: 0)

Comparing performance of: csstext vs styling vs classList add

Created: 4 years ago by: Guest

Jump to the latest result

csstext

styling

classList add

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):