Benchmark: Testing RAF - MeasureThat.net

HTML Preparation code:

<div id="app">
  Hello World
</div>

Script Preparation code:

var app = document.querySelector('#app');
function updateStyles(opts) {
  var list = opts.el.style.cssText.replace(/ /g, '').split(';');
  var result = {};
  var output = [];
  // Create our master list of existing properties.
  list.map(function chop(i) {
    if (i.length) {
      var item = i.split(':');
      result[item[0]] = item[1];
    }
  });

  // if we have an add object.
  if (opts.add) {
    // loop and add them to result.
    Object.keys(opts.add).forEach(function add(item) {
      result[item] = opts.add[item];
    });
  }

  // if we have a drop object.
  if (opts.drop) {
    // loop and remove them from result.
    opts.drop.forEach(function remove(item) {
      if (result[item]) {
        delete result[item];
      }
    });
  }

  // Concatenate our parameters.
  Object.keys(result).forEach(function cleanup(item) {
    output.push(item + ':' + result[item]);
  });

  // replace the style property on the element.
  opts.el.style.cssText = output.join(';');
}

Tests:

Normal el.style
app.style.height = '200px'; app.style.width = '200px'; app.style.minWidth = '200px'; app.style.backgroundColor = 'red';
el.style with RAF
window.requestAnimationFrame(function draw() { app.style.height = '300px'; app.style.width = '300px'; app.style.minWidth = '300px'; app.style.backgroundColor = 'blue'; });
New replacement of el.style with RAF
var newInlineStyles = { height: '500px', width: '500px', 'min-width': '500px', 'background-color': 'orange' }; window.requestAnimationFrame(function draw() { updateStyles({el: app, add: newInlineStyles}); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Normal el.style
el.style with RAF
New replacement of el.style with RAF

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its options.

**Benchmark Definition**

The benchmark is designed to test how browsers handle style property updates on an HTML element, specifically the `el.style` object. The benchmark creates two versions of this object:

1. **Normal el.style**: Sets individual style properties directly on the `el.style` object.
2. **New replacement of el.style with RAF**: Uses the Web API `requestAnimationFrame` (RAF) to update the style properties in a more efficient and modern way.

**Options Compared**

The benchmark compares three options:

1. **Normal el.style**: Directly sets individual style properties on the `el.style` object.
2. **New replacement of el.style with RAF**: Uses RAF to update the style properties, which is considered a more modern and efficient approach.
3. **No replacement (updated inline styles)**: Creates a new object with updated style properties and assigns it to the `el.style` object.

**Pros and Cons**

1. **Normal el.style**:
	* Pros: Simple and straightforward way to update style properties.
	* Cons: May lead to slower performance due to unnecessary property updates.
2. **New replacement of el.style with RAF**:
	* Pros: More efficient and modern way to update style properties, as it leverages the Web API's optimization capabilities.
	* Cons: Requires more setup and understanding of RAF.
3. **No replacement (updated inline styles)**:
	* Pros: Similar performance characteristics to `Normal el.style`, but with a simpler implementation.
	* Cons: May not be considered modern enough for some use cases.

**Library/Function Used**

In this benchmark, the Web API `requestAnimationFrame` is used to update style properties in the **New replacement of el.style with RAF** option. This function schedules a callback to be executed at the next animation frame and is designed to reduce CPU usage by minimizing the number of times the browser needs to repaint the screen.

**Special JS Feature/Syntax**

None mentioned in this benchmark, as it focuses on style property updates using the `el.style` object.

**Other Alternatives**

For updating style properties, other approaches include:

1. **CSS inline styles**: Setting CSS rules directly on an element.
2. **CSS class lists**: Adding or removing classes that define style properties.
3. **CSS custom properties (variables)**: Using variables to define style values and applying them using the `var()` function.

These alternatives may have different performance characteristics, depending on the browser and use case.

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/105.0.0.0 Safari/537.36

Browser/OS: Chrome 105 on Windows

View result in a separate tab

Test name	Executions per second
Normal el.style	640789.8 Ops/sec
el.style with RAF	1429910.4 Ops/sec
New replacement of el.style with RAF	1343070.2 Ops/sec

Related benchmarks:

Testing RAF (version: 0)

Testing RAF against inline style definitions

Comparing performance of: Normal el.style vs el.style with RAF vs New replacement of el.style with RAF

Created: 7 years ago by: Guest

Jump to the latest result

Normal el.style

el.style with RAF

New replacement of el.style with RAF

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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