Long description

The figure is divided into two sections.

Section 1 shows a JavaScript execution, where the DOM is changed thrice. The individual changes are reflected in Browser D O M. The layout is recalculated and repainted for each change and then shown on the browser one by one in 3 stages.

Section 2 shows a JavaScript React execution, where the DOM is changed thrice. The changes are stored together in a Virtual D O M. Then, Multiple changes to the browser DOM are made all at once. The layout is recalculated and repainted only once and shown on the browser in a single execution.