Benchmark: Testing RAF - MeasureThat.net

HTML Preparation code:

<style>
.target {
  height: 50px;
  width: 50px;
  background-color: green;
}
.orange {
  height: 100px;
  width: 100px;
  background-color: orange;
}
.blue {
  height: 300px;
  width: 300px;
  background-color: blue;
}
.red {
  height: 500px;
  width: 500px;
  background-color: red;
}
</style>
<div id="app" class="target">
  Hello World
</div>

Script Preparation code:

var app = document.querySelector('#app');
function updateClasses(opts) {
  var existing = opts.el.className.split(' ');
  // Add the new classes and the existing as a single array.
  var result = opts.add && existing.concat(opts.add) || existing;
  var uniqueNames = [];

  // if we have a drop property.
  if (opts.drop) {
    opts.drop.forEach(function remove(i) {
      if (result.indexOf(i) > -1) {
        result.splice(result.indexOf(i), 1);
      }
    });
  }

  // loop and remove duplicates.
  result.forEach(function cleanUp(i) {
    if (result.indexOf(i) > -1) {
      if (uniqueNames.indexOf(i) === -1) {
        uniqueNames.push(i);
      }
    }
  });

  // replace the classes on the element.
  opts.el.className = uniqueNames.join(' ');
}

Tests:

Normal el.classList.add
app.classList.add('orange');
el.classList.add with RAF
window.requestAnimationFrame(function draw() { app.classList.add('red'); });
New replacement of className with RAF
window.requestAnimationFrame(function draw() { updateClasses({el: app, add: ['blue']}); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Normal el.classList.add
el.classList.add with RAF
New replacement of className with RAF

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 25 days ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The provided benchmark is designed to measure the performance difference between three approaches: using `classList.add()` directly, using `requestAnimationFrame` (RAF) with `classList.add()`, and using a custom replacement function (`updateClasses`) for setting class names. The benchmark aims to test how each approach affects performance in a web browser.

**Options Compared**

The three options being compared are:

1. **Normal el.classList.add**: This is the simplest approach, where you directly call `classList.add()` on an element.
2. **el.classList.add with RAF**: In this approach, you use `requestAnimationFrame` to schedule the class addition for a specific frame. This allows the browser to batch up multiple requests and execute them more efficiently.
3. **New replacement of className with RAF (updateClasses)**: This is a custom solution that replaces the element's class name using an additional function (`updateClasses`). This approach might be used when you need more control over the class addition process.

**Pros and Cons of Each Approach**

1. **Normal el.classList.add**:
	* Pros: Simple, straightforward, and easy to understand.
	* Cons: Might not take advantage of browser optimizations, can lead to slower performance if called frequently.
2. **el.classList.add with RAF**:
	* Pros: Leverages browser optimizations, can improve performance by batch-processing multiple requests.
	* Cons: Requires an additional frame to be scheduled, which might add overhead in some cases.
3. **New replacement of className with RAF (updateClasses)**:
	* Pros: Offers more control over the class addition process and can potentially outperform other approaches in specific scenarios.
	* Cons: More complex implementation, may introduce unnecessary overhead.

**Library/Custom Functionality**

The `updateClasses` function is a custom solution that replaces the element's class name. It uses a combination of `classList.add()` and `classList.remove()` to achieve the desired behavior.

**Special JS Features/Syntax (None)**

There are no special JavaScript features or syntax used in this benchmark.

**Other Alternatives**

If you're interested in exploring alternative approaches, consider the following options:

1. **Using a CSS class list**: Instead of using `classList.add()` or `updateClasses`, you can manipulate the element's class list directly using CSS.
2. **Using a library like jQuery**: If you need more advanced class manipulation capabilities, consider using a library like jQuery, which provides a simplified way to work with classes.

Keep in mind that these alternatives might not provide the same level of performance or control as the options tested in this benchmark.

Latest run results:

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

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

Browser/OS: Chrome 54 on Mac OS X 10.11.4

View result in a separate tab

Test name	Executions per second
Normal el.classList.add	2765344.5 Ops/sec
el.classList.add with RAF	32366.5 Ops/sec
New replacement of className with RAF	32697.5 Ops/sec

Related benchmarks:

Testing RAF (version: 0)

Testing RAF against inline style definitions

Comparing performance of: Normal el.classList.add vs el.classList.add with RAF vs New replacement of className with RAF

Created: 7 years ago by: Guest

Jump to the latest result

Normal el.classList.add

el.classList.add with RAF

New replacement of className with RAF

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 25 days ago):