Benchmark Run Result for: Batch your DOM changes, especially when updating styles

Batch your DOM changes, especially when updating styles

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.

Date tested: 2 months ago

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

Test name	Executions per second
Using multiple calls to host objects (DOM)	50402.7 Ops/sec
Using batching - grouping multiple DOM manipulations together	47352.2 Ops/sec
Using multiple calls to host objects (DOM) v2	45382.6 Ops/sec

Benchmark definition (click to collapse):

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

Open this result on MeasureThat.net

Batch your DOM changes, especially when updating styles

Date tested: 2 months ago

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

Benchmark definition (click to collapse):

Using multiple calls to host objects (DOM)

Using batching - grouping multiple DOM manipulations together

Using multiple calls to host objects (DOM) v2