Reduce the number of DOM

You probably know that DOM is super slow. And what Flicking does is making hundreds or thousands of such slow DOM.

As we increase the number of panels, the number of DOM is increasing proportionately.

It would be nice if we could limit the number of DOMs to only the panels we see. And that’s how we came up with about two big options. You can delete the DOM element, or you can just set the display: none .

Deleting a DOM element seems to be a direct way to solve the problem. However, as the deletion or addition of the DOM element is part of the DOM manipulation, it is unlikely to escape from the DOM’s slowness.

display: none; seems fine at first sight. display: none; comes as attractive as it can not only reduce rendering cost but also is possible to avoid DOM manipulation. This is great for Flicking which should support Cross Framework Component.

So, we started by comparing the two approaches before we started to improve performance. We created three test cases: a simple test page with no modifications, a version that deletes the elements of the panel one second after the panel was created, and similarly a version that applies display: none; one second after the panel was created.

With setting the CPU throttling of the Chrome Devtools to 4x slowdown, the performance measurement results obtained from adding 300 DOM elements containing the image are as follows: