Should I use transform instead of redraw?

Question

I have several charts I do redraw everytime I zoom/pann using d3 brushes.

But, when I have tons of rendered elements, redrawing starts to be a little bit slow.

Instead of redrawing all elements everytime I move my brush, I was wondering whether or not it's feasible to transform (translate) the already drawn elements, and only redraw whenever I need to update my data.

I think it would increase my visualization performance a lot whenever panning to right/left, wouldn't it ?

Any insights ?

Answer 1

In general, the less you touch the DOM the better your performance will be. The details are browser and platform specific, but in general this is the pecking order of performance at a very high level (ordered from most expensive to least):

1. Creating and removing DOM elements.
2. Modifying properties of existing DOM elements.
3. In memory JavaScript (that is, not involving DOM at all... eg Array iteration).

So if you can get the result you want by simply modifying a targeted subset of existing elements with a transform attribute, I would guess you will be much better off.

Of course, it's impossible to say anything with certainty without seeing the actual code and use case.