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.
one month ago
User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36
Test name Executions per second
Using multiple calls to host objects (DOM) 9935.7 Ops/sec
Using batching - grouping multiple DOM manipulations together 10311.2 Ops/sec
Using multiple calls to host objects (DOM) v2 9630.4 Ops/sec
HTML Preparation code:
Tests:
  • Using multiple calls to host objects (DOM)

  • Using batching - grouping multiple DOM manipulations together

  • Using multiple calls to host objects (DOM) v2

Open this result on MeasureThat.net