Benchmark: uncheck vs change class

HTML Preparation code:

<div id="chk"></div>
<div id="spn"></div>

Script Preparation code:

let A=[document.createElement('input'),document.createElement('span')];
let B=document.getElementById('chk')
let C=document.getElementById('spn')
let D=[A[0].cloneNode(), A[0].cloneNode(), A[0].cloneNode(), A[0].cloneNode(), A[0].cloneNode(), A[0].cloneNode(),A[0].cloneNode(), A[0].cloneNode(), A[0].cloneNode(), A[0].cloneNode(), A[0].cloneNode(), A[0].cloneNode()]
let E=[A[1].cloneNode(), A[1].cloneNode(), A[1].cloneNode(), A[1].cloneNode(), A[1].cloneNode(), A[1].cloneNode(),A[1].cloneNode(), A[1].cloneNode(), A[1].cloneNode(), A[1].cloneNode(), A[1].cloneNode(), A[1].cloneNode()]
for(let a of D){
  a.setAttribute("type", "checkbox");
  a.checked=true;
  B.appendChild(a)
}
for(let a of E){
  a.className='a b c'
  C.appendChild(a)
}

Tests:

change checked
for(let a of D){ a.checked=false; }
change classname
for(let a of E){ a.className='a b c d e f' }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
change checked
change classname

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
change checked	8613979.0 Ops/sec
change classname	2689427.2 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON evaluates the performance of two different JavaScript operations related to manipulating the DOM (Document Object Model) elements. The tests compare the efficiency of changing the `checked` state of input elements against changing the class name of span elements, providing insight into the performance of these operations across different JavaScript environments.

### Benchmark A: Change Checked State
- **Test Name**: `change checked`
- **Benchmark Definition**:
  ```javascript
  for(let a of D){
      a.checked=false;
  }
  ```
- **Operation**: This test iterates over an array (`D`) of checkbox input elements that have been created, and sets their `checked` property to `false`.

### Benchmark B: Change Class Name
- **Test Name**: `change classname`
- **Benchmark Definition**:
  ```javascript
  for(let a of E){
      a.className='a b c d e f';
  }
  ```
- **Operation**: For this test, it iterates over another array (`E`) of span elements, changing the `className` property to a new string value (`'a b c d e f'`).

### Performance Results
The benchmarking results show:
- The **"change checked"** operation executes at `8,613,979 executions per second`.
- The **"change classname"** operation executes at `2,689,427.25 executions per second`.

### Comparison of Options
1. **Change Checked State (`change checked`)**:
   - **Pros**:
     - Generally faster, as evidenced by the benchmark results.
     - Simple property modification that may have a lower overhead in DOM reflow/repaint processes.
   - **Cons**:
     - Only applicable to checkbox inputs, which limits its use cases.

2. **Change Class Name (`change classname`)**:
   - **Pros**:
     - More versatile as it can affect multiple HTML elements and their styling.
     - Allows complex styles and behavior based on class changes.
   - **Cons**:
     - Slower performance due to potential reflow and repaint operations that occur as the browser re-evaluates the styles applied to the element.
     - Setting `className` can lead to losing previously defined classes if not handled correctly.

### Considerations
- The performance results indicate that simple property changes (like `checked`) can significantly outperform more complex styling changes (like `className`), largely due to the impact of the browser's rendering engine and how it manages DOM changes.
- The choice between these two operations would largely depend on the specific UI/UX requirements and the context in which they are used. If performance is critical and only a checkbox state needs to be changed, then manipulating `checked` is preferable. For styling purposes, changing the `className` may be necessary despite the performance cost.

### Alternatives
- **Using `classList`**: Instead of using `className`, developers can use the `classList` API to add or remove classes. This can avoid some pitfalls associated with overwriting the entire `className`:
  ```javascript
  // Example of using classList
  a.classList.add('new-class');
  a.classList.remove('old-class');
  ```
- **CSS Transitions**: For more complex UI changes that involve class manipulation, CSS transitions may offer smoother visual performance, making the DOM changes appear less jarring.

- **Batch Operations**: To improve performance when changing multiple classes or states, consider batching changes to minimize reflows or using requestAnimationFrame to intelligently batch DOM updates.

Understanding these considerations can help developers make informed choices about DOM manipulation strategies based on performance and maintainability.

Related benchmarks:

uncheck vs change class (version: 2)

Comparing performance of: change checked vs change classname

Created: one year ago by: Registered User

Jump to the latest result

change checked

change classname

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):