Benchmark: Batch your DOM changes, especially when updating styles

Batch your DOM changes, especially when updating styles (version: 3)

https://www.linkedin.com/pulse/25-techniques-javascript-performance-optimization-steven-de-salas When making calls to modify DOM make sure you batch them up so as to avoid repeated screen rendering, for example when applying styling changes. The ideal approach here is to make many styling changes in one go by adding or removing a class, rather than apply each individual style separately. This is because every DOM change prompts the browser to re-render the whole UI using the boxing model. If you need to move an item across the page using X+Y coordinates, make sure that these two are applied at the same time rather than separately.

Comparing performance of: Using multiple calls to host objects (DOM) vs Using batching - grouping multiple DOM manipulations together vs Using multiple calls to host objects (DOM) v2

Created: 6 years ago by: Registered User

Jump to the latest result

HTML Preparation code:

<div id='id1'>THE PROBLEM:

Native JavaScript is compiled into machine code by most scripting engines offering incredible performance boost, however interaction with host (browser) objects outside the JavaScript native environment raises unpredictability and considerable performance lag, particularly when dealing with screen-rendered DOM objects or objects which cause Disk I/O (such as WebSQL).

THE SOLUTION:

You can’t really get away from them, but keep your interaction with host objects to an absolute minimum.</div>


<div id='id2'>THE PROBLEM:

Native JavaScript is compiled into machine code by most scripting engines offering incredible performance boost, however interaction with host (browser) objects outside the JavaScript native environment raises unpredictability and considerable performance lag, particularly when dealing with screen-rendered DOM objects or objects which cause Disk I/O (such as WebSQL).

THE SOLUTION:

You can’t really get away from them, but keep your interaction with host objects to an absolute minimum.</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

​x
 
<div id='id1'>THE PROBLEM:
​
Native JavaScript is compiled into machine code by most scripting engines offering incredible performance boost, however interaction with host (browser) objects outside the JavaScript native environment raises unpredictability and considerable performance lag, particularly when dealing with screen-rendered DOM objects or objects which cause Disk I/O (such as WebSQL).
​
THE SOLUTION:
​
You can’t really get away from them, but keep your interaction with host objects to an absolute minimum.</div>
​
​
<div id='id2'>THE PROBLEM:
​
Native JavaScript is compiled into machine code by most scripting engines offering incredible performance boost, however interaction with host (browser) objects outside the JavaScript native environment raises unpredictability and considerable performance lag, particularly when dealing with screen-rendered DOM objects or objects which cause Disk I/O (such as WebSQL).
​
THE SOLUTION:
​
You can’t really get away from them, but keep your interaction with host objects to an absolute minimum.</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

Tests:

Using multiple calls to host objects (DOM)

jQuery('#id1')
       .width(600).height(400)
       .css('position', 'absolute')
       .css('top', '200px')
       .css('left', '200px');
jQuery('#id1')
       .width(599).height(401)
       .css('position', 'relative')
       .css('top', '199px')
       .css('left', '199px');

 
jQuery('#id1')       .width(600).height(400)       .css('position', 'absolute')       .css('top', '200px')       .css('left', '200px');jQuery('#id1')       .width(599).height(401)       .css('position', 'relative')       .css('top', '199px')       .css('left', '199px');​

Using batching - grouping multiple DOM manipulations together
jQuery('#id2').css({ width: '600px', height: '400px', position: 'absolute', top: '200px', left: '200px'} ); jQuery('#id2').css({ width: '599px', height: '401px', position: 'relative', top: '199px', left: '199px'} );
jQuery('#id2').css({
width: '600px',
height: '400px',
position: 'absolute',
top: '200px',
left: '200px'}
);

jQuery('#id2').css({
width: '599px',
height: '401px',
position: 'relative',
top: '199px',
left: '199px'}
);

Using multiple calls to host objects (DOM) v2

jQuery('#id1')
       .width(600).height(400);
       jQuery('#id1').css('position', 'absolute');
       jQuery('#id1').css('top', '200px');
       jQuery('#id1').css('left', '200px');
jQuery('#id1')
       .width(599).height(401);
       jQuery('#id1').css('position', 'relative');
       jQuery('#id1').css('top', '199px');
       jQuery('#id1').css('left', '199px');

 
jQuery('#id1')       .width(600).height(400);       jQuery('#id1').css('position', 'absolute');       jQuery('#id1').css('top', '200px');       jQuery('#id1').css('left', '200px');jQuery('#id1')       .width(599).height(401);       jQuery('#id1').css('position', 'relative');       jQuery('#id1').css('top', '199px');       jQuery('#id1').css('left', '199px');​

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Using multiple calls to host objects (DOM)
Using batching - grouping multiple DOM manipulations together
Using multiple calls to host objects (DOM) v2

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 11 days ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_3_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3.1 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 18 on iOS 18.3.2

View result in a separate tab

Test name	Executions per second
Using multiple calls to host objects (DOM)	25933.5 Ops/sec
Using batching - grouping multiple DOM manipulations together	23125.9 Ops/sec
Using multiple calls to host objects (DOM) v2	24977.3 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 5 months ago):

Let's break down what is being tested on the provided JSON.

The test cases are comparing two approaches to update DOM elements:

Multiple calls to host objects (DOM): This approach involves making multiple individual calls to update the DOM, such as jQuery('#id1') .width(600).height(400) followed by another call like jQuery('#id1') .css('position', 'absolute'). This is done in two variations: "Using multiple calls to host objects (DOM)" and "Using multiple calls to host objects (DOM) v2".
Batching - grouping multiple DOM manipulations together: In this approach, multiple updates are grouped together into a single call, like jQuery('#id1') .width(600).height(400).css('position', 'absolute').css('top', '200px').css('left', '200px'). This is done in one variation: "Using batching - grouping multiple DOM manipulations together".

Pros and Cons of each approach:

Multiple calls to host objects (DOM):
- Pros: Can be more readable and easier to debug individual updates.
- Cons: Results in repeated browser re-renders, which can lead to performance issues, especially when dealing with complex DOM or disk I/O operations.
Batching - grouping multiple DOM manipulations together:
- Pros: Reduces the number of browser re-renders, resulting in improved performance.
- Cons: Can be less readable and more difficult to debug individual updates.

Library usage:

The test case uses jQuery, a popular JavaScript library for DOM manipulation. Its purpose is to simplify the process of interacting with the Document Object Model (DOM) and provide features like event handling, animations, and Ajax interactions.

Special JS feature or syntax:

None mentioned in the provided JSON. However, it's worth noting that some modern browsers may have specific features or syntax optimizations that could affect DOM manipulation performance, such as Web Workers or requestAnimationFrame.

Alternatives:

For testing similar scenarios, you can consider using other JavaScript engines, like V8 (used by Node.js) or SpiderMonkey (used by Firefox), and testing frameworks like Benchmark.js or jsbench. These tools can help you compare the performance of different DOM manipulation approaches in various browsers and environments.

LLMs can make mistakes. Check important info.

Let's break down what is being tested on the provided JSON.

The test cases are comparing two approaches to update DOM elements:

1. **Multiple calls to host objects (DOM)**: This approach involves making multiple individual calls to update the DOM, such as `jQuery('#id1') .width(600).height(400)` followed by another call like `jQuery('#id1') .css('position', 'absolute')`. This is done in two variations: "Using multiple calls to host objects (DOM)" and "Using multiple calls to host objects (DOM) v2".
2. **Batching - grouping multiple DOM manipulations together**: In this approach, multiple updates are grouped together into a single call, like `jQuery('#id1') .width(600).height(400).css('position', 'absolute').css('top', '200px').css('left', '200px')`. This is done in one variation: "Using batching - grouping multiple DOM manipulations together".

**Pros and Cons of each approach:**

* **Multiple calls to host objects (DOM)**:
	+ Pros: Can be more readable and easier to debug individual updates.
	+ Cons: Results in repeated browser re-renders, which can lead to performance issues, especially when dealing with complex DOM or disk I/O operations.
* **Batching - grouping multiple DOM manipulations together**:
	+ Pros: Reduces the number of browser re-renders, resulting in improved performance.
	+ Cons: Can be less readable and more difficult to debug individual updates.

**Library usage:**

**Special JS feature or syntax:**

**Alternatives:**

Related benchmarks: