Benchmark: Disable Transition via CSS vs Disable transition via Animation.cancel vs Disable transition via Animation.finish 0.16 (multiple changes)

HTML Preparation code:

<style>
  #root div {
    transition: all 2s;
  }
</style>
<div id="before"></div>
<div style="transition: * 2s;" id="root"></div>

Script Preparation code:

function makeEl(tagName, parent) {
  const newEl = document.createElement(tagName);
  parent.appendChild(newEl);
  return newEl;
}

const rows = 100; const columns = 10;
const fillRoot = () => {
    var root = document.getElementById('root');
    root && root.innerHTML && (root.innerHTML = '');
    for(let j = 0; j < rows; j++) {
      const row = makeEl('div', root);
      row.setAttribute('style', 'width: 100%');
      for(let i = 0; i < columns; i++) {
        const column = makeEl('div', row);
        column.setAttribute('style','position: fixed; display:inline-block; left: ' + (window.innerWidth/columns*i) + 'px; top: ' + (100*j) + 'px; padding: 5px; width:' + (90/columns) + '%; height: 100px; background-color: #'+(Math.random()*0xFFFFFF<<0).toString(16));
        column.innerHTML = 'item ' + i + ' ' + j;
      }
    }
  }
fillRoot();

Tests:

Disable transition with css
document.querySelectorAll('#root div').forEach(function(el){ el.setAttribute('style','none !important'); }) document.querySelectorAll('#root div').forEach(function(el){ el.style['margin-top'] = '100px';}) document.querySelectorAll('#root div').forEach(function(el){ el.style['margin-top'] = '200px';}) document.querySelectorAll('#root div').forEach(function(el){ el.style['margin-top'] = '0px';})
Disable transition with animation.finish
document.querySelectorAll('#root div').forEach(function(el){ el.style['margin-top'] = '100px'; el.getAnimations().map((animation) => animation.finish()) }) document.querySelectorAll('#root div').forEach(function(el){ el.style['margin-top'] = '200px'; el.getAnimations().map((animation) => animation.finish()) }) document.querySelectorAll('#root div').forEach(function(el){ el.style['margin-top'] = '0px'; el.getAnimations().map((animation) => animation.finish()) })
Disable transition with animation.cancel
document.querySelectorAll('#root div').forEach(function(el){ el.style['margin-top'] = '100px'; el.getAnimations().map((animation) => animation.cancel()) }) document.querySelectorAll('#root div').forEach(function(el){ el.style['margin-top'] = '200px'; el.getAnimations().map((animation) => animation.cancel()) }) document.querySelectorAll('#root div').forEach(function(el){ el.style['margin-top'] = '0px'; el.getAnimations().map((animation) => animation.cancel()) })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Disable transition with css
Disable transition with animation.finish
Disable transition with animation.cancel

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

Browser/OS: Chrome 128 on Mac OS X 10.15.7

View result in a separate tab

Disable transition with css

642/s

Disable transition with animation.cancel

1/s

Disable transition with animation.finish

0/s

View exact numbers

Test name	Executions per second
✓ Disable transition with css	642 Ops/sec
Disable transition with animation.cancel	1 Ops/sec
Disable transition with animation.finish	0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Definition**

The benchmark is designed to test three different approaches to disabling transitions in CSS:

1. **Disable transition via CSS**: This approach sets the `transition` property to `none` for all elements with class `div`.
2. **Disable transition via Animation.cancel**: This approach cancels all animations on each element with class `div` after changing its `margin-top` style property.
3. **Disable transition via Animation.finish 0.16 (multiple changes)**: This approach cancels and then finishes an animation for multiple changes to the `margin-top` style property, which seems counterintuitive but might be related to a specific bug or optimization.

**Options Compared**

* CSS-based approach vs. Animation-cancel approach vs. Animation-finish approach

**Pros and Cons of Each Approach:**

1. **CSS-based approach**
	* Pros:
		+ Simple and straightforward
		+ No need for explicit animation management
	* Cons:
		+ Might not work in all situations (e.g., animations with external libraries)
		+ Could have performance implications if many elements are affected
2. **Animation-cancel approach**
	* Pros:
		+ More accurate, as it cancels the actual animation
		+ Could be more reliable than CSS-based approaches
	* Cons:
		+ Requires explicit animation management and handling
		+ Might not work in all situations (e.g., animations with external libraries)
3. **Animation-finish approach**
	* Pros:
		+ Could potentially optimize performance by canceling and then finishing the animation
	* Cons:
		+ Seemingly counterintuitive, which might lead to confusion or bugs
		+ Might not work in all situations (e.g., animations with external libraries)

**Library and Purpose**

The `getAnimations()` function is likely part of the Web Animations API, which provides a way to manage animations on elements. This API is supported by modern browsers, but might not be available or working as expected in older browsers.

**Special JS Feature/Syntax**

There doesn't seem to be any special JavaScript features or syntax being used in this benchmark that's worth mentioning. However, the Web Animations API and CSS properties like `transition` are essential for understanding this benchmark.

**Alternatives**

Other approaches to disabling transitions might include:

1. **Using a library or framework-specific solution**: Depending on the specific library or framework being used, there might be built-in solutions for disabling transitions.
2. **Implementing a custom solution**: In some cases, developers might need to implement their own solution for disabling transitions, which could involve manual animation management or using low-level CSS properties.

Keep in mind that this benchmark is focused on comparing different approaches to disabling transitions, rather than exploring alternative solutions.

Disable Transition via CSS vs Disable transition via Animation.cancel vs Disable transition via Animation.finish 0.16 (multiple changes) (version: 0) Benchmark.js

Comparing performance of: `Disable transition with css vs Disable transition with animation.finish vs Disable transition with animation.cancel`

Created: one year ago by: Guest

Go to the latest result

Disable transition with css

Disable transition with animation.finish

Disable transition with animation.cancel

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Disable Transition via CSS vs Disable transition via Animation.cancel vs Disable transition via Animation.finish 0.16 (multiple changes) (version: 0) Benchmark.js

Comparing performance of: Disable transition with css vs Disable transition with animation.finish vs Disable transition with animation.cancel

Created: one year ago by: Guest

Go to the latest result

Disable transition with css

Disable transition with animation.finish

Disable transition with animation.cancel

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Disable transition with css vs Disable transition with animation.finish vs Disable transition with animation.cancel`