There is a common belief that using the Virtual DOM (VDOM) is much more efficient compared to direct manipulations of the real DOM because changes in

Search code, repositories, users, issues, pull requests...

submited by

Style Pass

2024-10-28 16:30:08

There is a common belief that using the Virtual DOM (VDOM) is much more efficient compared to direct manipulations of the real DOM because changes in it accumulate and are applied in one big update, unlike direct operations with the real DOM, which are considered slow. But let’s see if this holds true in practice.

Let’s take two examples of adding a large number of elements to a list. In the first example, we create a fragment, add elements to it, and then append the fragment to the DOM in a single batch:

It’s logical to assume that the second option would be slower due to the multiple DOM operations, which is the primary reason for the popularity of VDOM. However, modern browsers are so well-optimized that the execution time of these two approaches is often about the same.

Loading this page in Safari may take longer than expected. For a faster experience, please use modern browsers like Chrome or Firefox.