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: 5 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>

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');
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'} );
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');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Browser/OS: Chrome 122 on Windows

View result in a separate tab

Test name	Executions per second
Using multiple calls to host objects (DOM)	22645.9 Ops/sec
Using batching - grouping multiple DOM manipulations together	22839.3 Ops/sec
Using multiple calls to host objects (DOM) v2	21151.0 Ops/sec

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

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: 5 years ago by: Registered User

Jump to the latest result

Using multiple calls to host objects (DOM)

Using batching - grouping multiple DOM manipulations together

Using multiple calls to host objects (DOM) v2

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A