Benchmark: Disable Transition via CSS vs Disable transition via Animation.cancel vs Disable transition via Animation.finish 0.15 (no initial style change)

HTML Preparation code:

<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 = 1000; 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'); el.style['margin-top'] = '100px';})
Disable transition with animation.finish
document.querySelectorAll('#root div').forEach(function(el){ el.style['margin-top'] = '100px'; 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()) })

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/605.1.15 (KHTML, like Gecko) Version/17.6 Safari/605.1.15

Browser/OS: Safari 17 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Disable transition with css	176.3 Ops/sec
Disable transition with animation.finish	423.4 Ops/sec
Disable transition with animation.cancel	403.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the details of this JavaScript microbenchmark.

**Benchmark Definition**

The benchmark defines three different ways to disable CSS transitions on an HTML element: using CSS, animation.cancel, and animation.finish.

*   **Disable transition via CSS**: This method sets the `style` attribute of the element to `'none !important'`, effectively disabling the transition.
*   **Disable transition via Animation.cancel**: This method gets all animations on the element and calls `animation.finish()` on each of them. Since animations are already finished, this method should not affect the transitions. However, some browsers might still apply the transition due to internal caching or other factors.
*   **Disable transition via Animation.finish 0.15 (no initial style change)**: This is similar to the previous method but with an additional parameter `0.15` in the `animation.finish()` call. This suggests that the intention was to cancel the animation without applying any changes to the element's styles.

**Comparison of Options**

Here are some pros and cons of each approach:

*   **CSS**: Pros:
    *   Simple and straightforward.
    *   Works well on most browsers.
    Cons:
    *   May not work correctly in all cases (e.g., due to internal caching).
*   **Animation.cancel**: Pros:
    *   Some browsers might cancel the animation, but it's not guaranteed.
Cons:
    *   Might still apply transitions due to internal caching or other factors.
*   **Animation.finish 0.15 (no initial style change)**: Pros:
    *   More specific than Animation.cancel.
Cons:
    *   Still might not work correctly on all browsers.

**Library and Syntax**

In this benchmark, the `animation` object is used, which is a part of the Web API for working with animations in web pages. The `getAnimations()` method returns an array of all animations currently running on the element. The `finish()` method cancels or stops the animation.

No special JavaScript features or syntax are required to run this benchmark.

**Other Considerations**

When comparing these methods, it's essential to consider the behavior of different browsers and their caching mechanisms. Some browsers might cache transitions even after calling Animation.cancel() or finish(), which can lead to incorrect results.

To get accurate results, it's recommended to use a specific method for each browser or platform, if possible.

**Alternatives**

If you need to disable CSS transitions in your application, here are some alternative approaches:

*   **Use the `will-change` property**: Instead of setting `style` attribute to `'none !important'`, try using the `will-change` property. This can help browsers avoid caching transitions.
*   **Disable all animations**: If you're not specific about when to disable transitions, you can try disabling all animations on the element by calling `animation.cancel()` for each animation.
*   **Use a library or framework**: Some libraries or frameworks (e.g., React or Angular) provide built-in features for managing CSS transitions and animations. You may want to consider using one of these instead of implementing your own solution.

In conclusion, the choice of method depends on your specific requirements, the browsers you're targeting, and any additional constraints or preferences you may have.

Related benchmarks:

Disable Transition via CSS vs Disable transition via Animation.cancel vs Disable transition via Animation.finish 0.15 (no initial style change) (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):