Why does DOM Manipulation take so long?

Question

I have read in the past that manipulating the DOM is one of the most expensive things you can do in javascript. I've also seen it demonstrated in perfs . Why does it take so long?

Answer 1

This slowness happens due to the document reflow. From Google Developers Speeding up JavaScript: Working with the DOM guide

Working with the DOM can cause browser reflow, which is the browser's process of determining how things should be displayed. Directly manipulating the DOM, changing CSS styles of elements, and resizing the browser window can all trigger a reflow . Accessing an element's layout properties such as offsetHeight and offsetWidth can also trigger a reflow. Because each reflow takes time , the more we can minimise browser reflow, the faster our applications will be.

Answer 2

Every time the DOM is updated, the document is re-rendered. Layout is very complicated.