Benchmark: HTML manipulation with and without requestAnimationFrame

HTML Preparation code:

<div id='messages'></div>

Script Preparation code:

const html = [];
for(i=0; i<1000; i++) {
	html.push("<span>Text</span>");
}
document.getElementById("messages").insertAdjacentHTML('beforeend', html)

Tests:

With requestAnimationFrame
const messagesDiv = document.getElementById("messages"); function removeChildWithAnimation() { if (messagesDiv.firstChild) { messagesDiv.removeChild(messagesDiv.firstChild); requestAnimationFrame(removeChildWithAnimation); // Call recursively until all children are removed } } requestAnimationFrame(removeChildWithAnimation);
Without requestAnimationFrame
const messagesDiv = document.getElementById("messages"); while (messagesDiv.firstChild) { messagesDiv.removeChild(messagesDiv.firstChild); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
With requestAnimationFrame
Without requestAnimationFrame

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

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
With requestAnimationFrame	3350669.8 Ops/sec
Without requestAnimationFrame	11287557.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The benchmark titled "HTML manipulation with and without requestAnimationFrame" compares two different approaches for removing child elements from a DOM node: one method uses `requestAnimationFrame`, and the other operates without it.

### Benchmark Description

**Benchmark Approaches:**

1. **With `requestAnimationFrame`:** 
   - This approach uses a recursive function that removes the first child of the `messages` div and then schedules itself to run again in the next animation frame using `requestAnimationFrame(removeChildWithAnimation)`. This means that the removal operation happens asynchronously, allowing the browser to manage rendering in between frames, which can lead to smoother visual updates.

2. **Without `requestAnimationFrame`:**
   - This approach immediately removes all child elements from the `messages` div in a synchronous loop using a `while` statement. This does not give the browser a chance to perform any rendering in between removals, which can lead to jarring visual experiences if there are many elements being removed quickly.

### Pros and Cons

- **With `requestAnimationFrame`:**
  - **Pros:**
    - Allows for smoother UI updates, as the rendering can occur between removals, potentially providing a better experience for users.
    - Useful when performance is tied to visual feedback, especially in environments where heavy DOM manipulations are done.
  - **Cons:**
    - The operational time might be longer since it relies on the browser's animation frame, which introduces delays compared to synchronous execution.
    - More complicated to implement, as it requires recursive function logic.

- **Without `requestAnimationFrame`:**
  - **Pros:**
    - Generally faster execution as all removals are done in a single synchronous operation.
    - Simpler implementation requiring only a straightforward loop.
  - **Cons:**
    - Can create a blocking experience if large numbers of DOM elements are manipulated at once, leading to poor performance for the user due to a lack of visual feedback.

### Alternatives

Besides these two methods, other alternatives for DOM manipulation could include:

- **Using `setTimeout` or `setInterval`:** These functions can introduce a delay between operations, allowing the browser to render the UI, similar to the `requestAnimationFrame` method but less tailored for animation.
  
- **Batching DOM Updates:** Implementing a batching strategy that collects updates before applying them could optimize performance significantly, reducing the frequency of layout recalculations.

- **Virtual DOM Libraries:** Leveraging libraries like React that use a virtual DOM can optimize updates, reducing direct manipulation and minimizing the performance hit associated with modifying the real DOM.

### Conclusion

This benchmark highlights two important strategies for manipulating the DOM in terms of user experience and performance. While the method with `requestAnimationFrame` promotes smoother animations, the direct manipulation approach without it offers speed at the cost of potential visual stuttering. Understanding these strategies is critical for developing efficient web applications, particularly when managing a large number of DOM elements.

Related benchmarks:

HTML manipulation with and without requestAnimationFrame (version: 0)

Comparing performance of: With requestAnimationFrame vs Without requestAnimationFrame

Created: one year ago by: Registered User

Jump to the latest result

With requestAnimationFrame

Without requestAnimationFrame

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):