Virtual DOM

1. Difference between DOM and Virtual DOM
   – DOM (Document Object Model)
   • DOM is a tree structure that represents web documents. HTML elements are represented by each node, and the browser renders the page based on the DOM.
   • Disadvantage: Performance issues may arise when manipulating the DOM when it has a large and complex structure. This has a negative impact on browser performance, especially when the DOM changes or is re-rendered frequently. Modifying the DOM directly requires the browser to reflect its contents immediately, which is computationally expensive.
   • Virtual DOM
   • Virtual DOM is a virtual DOM tree that exists in memory. It is a lightweight copy of the real DOM and operates independently of the browser’s real DOM.
   • Instead of accessing the DOM directly, the framework modifies the virtual DOM, writes the changes to memory and compares them to the real DOM, efficiently updating only the parts that are needed.
2. How virtual DOM works

1. Generate virtual DOM
   • When the application is first loaded, Vue.js or React creates a virtual DOM based on the state of the component.
   • Virtual DOM is a tree structure similar to the HTML structure and consists of virtual elements that reflect the state or data of the component.
2. Detection of state change
   • When a component’s data changes, Vue.js or React re-creates a new virtual DOM based on the changed data. At this time, the framework recalculates the virtual DOM.
3. DOM Diffing (Comparison)
   • **Diffing** the new virtual DOM and the previously created virtual DOM to find differences between the two trees.
   • Comparing each node (element) of the tree, only the changed parts are identified.
4. Apply minimal updates (patching)
   • If the changed part is confirmed, only that part is updated by **patch**ing the actual DOM. Since it only modifies nodes or properties that have changed, it only updates parts of the DOM rather than redrawing the entire DOM.
   • This process optimizes browser performance and minimizes unnecessary DOM manipulation.
5. Advantages of Virtual DOM
   – Performance Optimization: Improves browser rendering performance by manipulating the virtual DOM rather than directly manipulating the DOM and then only updating changes compared to the actual DOM.
   – Efficiency: Frameworks like Vue.js update only the parts that are needed, ensuring efficient rendering even for large applications.
   – Support for various view layers: You can easily manage UI updates according to state changes. When data changes, the virtual DOM is automatically updated and reflected on the screen accordingly.
6. Practical example

Example: Simple Vue.js code that changes text whenever the state changes

<template>
     <div>
       <p>{{ message }}</p>
       <button @click="changeMessage">Change Message</button>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         message: 'Hello, Vue!'
       };
     },
     methods: {
       changeMessage() {
         this.message = 'Hello, Virtual DOM!';
       }
     }
   };
   </script>

• If message changes here, Vue regenerates the virtual DOM and compares it with the previous virtual DOM,

  {{ message }}

  Only the
  part is patched into the actual DOM. The rest will not be re-rendered.
  5. DOM Diffing Process
  1. First render time:
  • A virtual DOM is created in the initial state, and the entire DOM is rendered.
    2. When status changes:
  • When the component state changes, a new virtual DOM tree is created.
  • Vue.js or React compares the new virtual DOM with the old virtual DOM to find differences.
    3. When updating:
  • Only the parts that differ are reflected in the actual DOM. For example, only the message text changes, so \

    {{ message }}\

    Only the

    element is updated.
    6. Framework using virtual DOM

• React: One of the first frameworks to introduce virtual DOM, it uses virtual DOM for efficient DOM manipulation in a component-based UI structure.
• Vue.js: Inspired by ideas from React and uses virtual DOM to optimize performance.
• Svelte: Svelte does not use a virtual DOM, but rather optimizes DOM manipulation during the compilation phase, whereas most frameworks utilize a virtual DOM.