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

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()) el.style['margin-top'] = '200px'; el.getAnimations().map((animation) => animation.finish()) 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()) el.style['margin-top'] = '200px'; el.getAnimations().map((animation) => animation.cancel()) 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

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explore what's being tested.

**Benchmark Overview**

The benchmark measures how long it takes to disable transitions on an HTML element using different approaches:

1. Disabling transitions via CSS styles
2. Disabling transitions via `animation.cancel()`
3. Disabling transitions via `animation.finish()` (which is not a standard method, but seems to be used by Chrome)

**Options Compared**

Here's what's being compared:

* **Disable transition with CSS**: This approach sets the `transition` property on the HTML element and then overrides it with `style='none !important'`. It also updates the `margin-top` style multiple times.
* **Disable transition with `animation.cancel()`**: This approach calls the `cancel()` method on each animation of the element, which should disable any pending transitions.
* **Disable transition with `animation.finish(0)`**: This approach calls the `finish()` method on each animation of the element, passing 0 as an argument. The purpose of this argument is not immediately clear, but it might be related to the timing or behavior of the `finish()` method.

**Pros and Cons**

Here are some pros and cons for each approach:

* **Disable transition with CSS**:
	+ Pros: Simple and widely supported.
	+ Cons: May cause layout issues if not done correctly.
	+ Pros (again!): Can be used to reset other styles or effects on the element.
* **Disable transition with `animation.cancel()`**:
	+ Pros: Clear and explicit way to disable transitions.
	+ Cons: Might not work in older browsers that don't support animations.
	+ Pros (again!): Can be used to cancel multiple animations simultaneously.
* **Disable transition with `animation.finish(0)`**:
	+ Pros: None apparent.
	+ Cons: Unconventional method, might cause issues or unexpected behavior.

**Other Considerations**

When working with CSS transitions and animations, it's essential to consider the following:

* **Browser support**: Different browsers have varying levels of support for CSS transitions and animations. Ensure your solution works across multiple browsers.
* **Performance**: Animations can impact performance, especially if used excessively or on complex elements. Optimize your code to minimize performance overhead.
* **Accessibility**: When disabling transitions, ensure that the resulting layout is still accessible and usable for users with disabilities.

**Alternative Approaches**

If you're not satisfied with these approaches or want to explore other options, consider:

* Using a CSS preprocessor like Sass or Less to optimize your styles.
* Utilizing the Web APIs for animations, such as `requestAnimationFrame()` or `Web Animations API`.
* Employing a library or framework that provides built-in support for transitions and animations, like React or Angular.

Keep in mind that each approach has its own strengths and weaknesses. Carefully evaluate your specific use case and performance requirements before making a decision.

Latest run results:

Run details: (Test run date: one month 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	651.5 Ops/sec
Disable transition with animation.finish	0.3 Ops/sec
Disable transition with animation.cancel	0.8 Ops/sec

Related benchmarks:

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

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

Created: one month 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>

Experimental features:

Fastest: N/A

Slowest: N/A

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