How much React virtual DOM delays content rendering
In my benchmarking I make a browser render a table made up of 2000 divs each containing 20 divs with its coordinates as the text content and title.
During each rendering of the table I take two measurements— the time spent on changing the DOM and total time spent on displaying the table. To make sure that my measurements are accurate, I visualize them in the Console section of Performance tab of Chrome DevTools (yellow and orange bars in the screenshot below). The total time nicely overlaps with the striped bar representing a task in the browser task queue. And the code changing the DOM overlaps with the brownish Animation frame fired bar in the beginning of the task.
Note that the changes to the DOM take much less time than displaying them. However you modify the DOM, the time needed to paint the changed will be ~15 times greater. Therefore, optimizing DOM manipulations makes little sense until the rendering is optimized (for example…
