Benchmark: Disable Transition via CSS vs Disable transition via Animation.cancel vs Disable transition via Animation.finish 0.1

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 = 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.1 Ops/sec
Disable transition with animation.finish	321.2 Ops/sec
Disable transition with animation.cancel	324.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what is being tested in this benchmark.

The test compares three different approaches to disabling transitions on HTML elements in the Safari browser:

1. **CSS**: The first approach uses CSS styles to disable transitions. The code sets the `transition` property to `none` for all `div` elements inside the `#root` container, effectively disabling any transition effects.
2. **Animation.cancel**: The second approach uses the `animation.cancel()` method to cancel the current animation on each element. This cancels any ongoing transition effect and prevents new transitions from occurring.
3. **Animation.finish(0.1)**: The third approach uses the `animation.finish()` method with a timeout of 0.1 seconds to finish the current animation before setting the transition property to `none`. This allows the transition to complete partially before disabling it.

Now, let's discuss the pros and cons of each approach:

* **CSS**: This is the simplest approach and should be the fastest, as it only requires setting a CSS style. However, this approach might not work if the browser has already started applying a transition effect.
* **Animation.cancel**: This approach cancels the current animation, which might be faster than finishing it. However, canceling an animation can be more expensive than just setting `transition: none`, as it requires additional resources to clean up the animation state.
* **Animation.finish(0.1)**: This approach is similar to `Animation.cancel`, but with a subtle difference. By finishing the transition partially, we ensure that any pending effects are completed before disabling the transition. However, this approach still requires more resources than just setting `transition: none`.

Other considerations:

* The test is run on a desktop platform (Mac OS X 10.15.7) and uses Safari 17 browser.
* The benchmark measures the number of executions per second for each test case.

As for special JavaScript features or syntax, there isn't any notable mention in this benchmark definition.

Alternatives to these approaches might include:

* Using `transition: none` with a timeout to manually cancel transitions
* Implementing custom animation handling using Web Animations API (WAAPI)
* Using other CSS properties or attributes to disable transitions

However, it's worth noting that disabling transitions is a standard web development technique and these alternatives might not be necessary in most cases.

As for the test results, they show that `Animation.cancel` is the fastest approach, followed by `CSS`, with `Animation.finish(0.1)` being the slowest.

Related benchmarks:

Disable Transition via CSS vs Disable transition via Animation.cancel vs Disable transition via Animation.finish 0.1 (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):