Generate less DOM nodes

[arneg]

In many widgets like circular, DOM nodes are created but are often left empty, like markers, dots, etc. Create those nodes dynamically when they are needed. They increase the size of the DOM and thereby the cost of relayouts.

[arneg]

Here are some statistics of the 64 channel demo. Whats measured here is a timeline profile for setting a random value to a knob 100 times. The difference with the measurements is number of strips and number of pages.

Safari (MacBook Pro)

1 Strip and 1 Page

8 Strips and 1 Page

8 Strips and 8 Pages

8 Strips and 8 Pages (all pages preloaded)

8 Strips and 8 Pages (no preload, no DOM)

pages removed from dom, instead of 'display:none'

8 Strips and 8 Pages (no preload)

Chrome (MacBook Pro)

1 Strip and 1 Page

8 Strips and 1 Page

8 Strips and 8 Pages

8 Strips and 8 Pages (no DOM)

8 Strips and 8 Pages (no preload)

8 Strips and 8 Pages (no preload, no DOM)

Firefox (MacBook Pro)

1 Strip and 1 Page

8 Strips and 1 Page

8 Strips and 8 Pages

8 Strips and 8 Pages (no DOM)

8 Strips and 8 Pages (no DOM, no preload)

8 Strips and 8 Pages (no preload)

Microsoft Edge

1 Strip 1 Page

8 Strips 1 Page

8 Strips 8 Pages

8 Strips 8 Pages (no DOM)

8 Strips 8 Pages (no preload)

Safari (iPad)

1 Strip 1 Page

8 Strips 1 Page

8 Strips 8 Page

8 Strips 8 Page (no preload)

[arneg]

As a comparison a similar benchmark with one levelmeter, which uses a canvas does not touch the DOM.

Safari (MacBook Pro)

1 Strip 1 Page

8 Strips 1 Page

8 Strips 8 Pages (no preload)

8 Strips 8 Pages

[boomshop]

I guess best way to fix is to still create the nodes but not to add them to the DOM if unused - or remove them from the DOM if emptied. Those nodes are an inherent part of a widget and should be available anytime - whether or not currently added to the DOM.