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

Test name	Executions per second
Disable transition with css	641.9 Ops/sec
Disable transition with animation.finish	0.3 Ops/sec
Disable transition with animation.cancel	0.8 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.

Related benchmarks:

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

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

Jump 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):