The truth behind Virtual DOM

Part 1: What’s the problem? Virtual DOM (React, Vue.js, Angular and the like) is a jargon which most web engineers have heard of before. If you are one of those engineers, then you probably think that Virtual DOM makes DOM faster when it comes to updating. But however, that idea is a misconception or rather, it is just an idea in which users of Virtual DOM promote. People often hope some UI libraries utilizing Virtual DOM would be much faster compared to some libraries such as Jquery, but that’s not what Virtual DOM is supposed to be. While I have the same opinion that Virtual DOM assists us in many aspects, but I will explain why fast-updating and fast-rendering are not the cases in Virtual DOM.

Part 2: If it is not for fast-updating and fast-rendering, then what does it do? We’ll first examine on how DOM creation and update happens when manually doing it. By going through the process of creating and updating DOM, we would have a deep understanding of how DOM works in order to see what Virtual DOM can do for us. After showing some glitches of the DOM, we will be going into Virtual DOM world and knowing what it is capable of. Having done all, we could come to a conclusion that with the help of Virtual DOM, the DOM updating and creating side would be as efficient as possible whereas we would have to do more work on JS side.

Part 3: Is it worth using Virtual DOM? There are many good things about Virtual DOM but massive performance is not one of them. The difference between DOM and Virtual DOM is similar to coding Python or Javascript versus coding in C or Pascal. Hence, there is always a trade-off. Also, with Virtual DOM, we would have to spend more time to examine what part in Virtual DOM we have to handcraft (explain and link with Part 2). For some parts that require a lot of performance, it is not even possible to do so (link with Part 2). Therefore, Virtual DOM is just one of the available tools for us to use at our own convenience.