The DOM is Not Slow

One of the biggest misconceptions in Front End Development is that the DOM is slow. This is not true!

Whenever adding or removing DOM nodes, not much actually needs to happen. It sets a few pointers, adds/removes a little to the DOM tree and that’s really it.

However touching the DOM triggers the full rendering pipeline which includes the layout process. It is this process that is slow because it involves calculating the computed styles (like dimensions and positioning) of every node in relation to the viewport, ready for the final paint step.

It is this process that is expensive enough that we want to avoid it where possible. A Virtual DOM offered by libaries like React and Vue achieves this by computing diffs with the current DOM tree and then performing the minimum amount of operations.