Question 73232 in Reactjs Question posted in
The new location for the React Documentation can be found here.

What is difference between Dom and virtual Dom? – Reactjs

what is exact difference between them and what is proper definition for both of them?

I try to find proper definition in google but I couldn’t find my satisfactory answer.

Tags:

7

Answers


  1. 0

    real dom: here any change updates the entire dom updating s slow aninefficientt
    virtual dom: any change only updates the relevant in the tree updating is fast and efficient.

    Login or Signup to reply.
  2. 0

    The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation. You can read more on this page:
    https://reactjs.org/docs/faq-internals.html#gatsby-focus-wrapper

    The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page. More on this page: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

    Login or Signup to reply.
  3. 0

    Real DOM is what you see on your browser screen and virtual DOM is copy of it. The main difference is that when you make changes in any part of real DOM, It re-renders the whole DOM at once and that affects efficiency of your server loading cause it has to reload the whole page as browser can only read JS, Html/CSS. and JS is single threaded language. When you work with virual DOM and makes changes to any part of it, it checks the previous DOM and runs a algorithm called "differ" which performs an inspection of where changes are made and only re-renders that part of DOM and represents the changed DOM to you.

    Login or Signup to reply.
  4. 0

    DOM (Document Object Model) and Virtual DOM are both representations of a web page or web application’s structure and content, but they differ in several key ways.

    DOM is a hierarchical representation of the HTML elements that make up a web page. It is a tree-like structure that contains all the HTML elements as nodes, including tags, attributes, and text. The DOM is created by the browser when it loads an HTML page, and it can be manipulated using JavaScript. Changes made to the DOM can be seen immediately by the user.

    Virtual DOM, on the other hand, is an abstract representation of the DOM that is used by frameworks like React to optimize the rendering process. When a change is made to the state of a React component, the entire virtual DOM is updated, not the actual DOM. The virtual DOM is then compared to the previous virtual DOM to determine what changes need to be made to the actual DOM, and only those changes are made. This approach allows React to minimize the number of changes made to the actual DOM, which can improve performance and reduce the risk of bugs.

    In summary, the main difference between DOM and Virtual DOM is that DOM is the actual tree structure that represents the web page, while Virtual DOM is an abstract representation of the DOM that is used by frameworks like React to optimize the rendering process.

    Login or Signup to reply.
  5. 0

    DOM stands for Document Object Model, which is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM provides a way for programs to access and manipulate the content and structure of web pages using programming languages such as JavaScript.

    Virtual DOM, on the other hand, is a concept in which a virtual representation of the DOM is created in memory, which can be manipulated and updated by JavaScript code without directly interacting with the real DOM. The virtual DOM allows for more efficient updates to the real DOM by reducing the number of direct manipulations needed. When a change is made to the virtual DOM, the updated virtual DOM is compared with the previous version, and the real DOM is updated only with the changes that were made.

    In summary, the main difference between the DOM and the virtual DOM is that the DOM is the actual representation of a web page’s structure and content, while the virtual DOM is an abstract, lightweight copy of the real DOM that can be used to optimize and speed up web development and rendering.

    Login or Signup to reply.
  6. 0

    We need to find out what is Real DOM before we explain the difference of Real DOM and Virtual DOM.DOM is Dcoument Object Model that means the abstraction of structured text,look at this code:

    const div =document.createElement('div');
let str='';
for(let key in div){
    str+=key+' '
}
console.log(str)

    We will get too many attributes of div like align title lang translate dir hidden accessKey...,that’s how browser describes Real DOM.
    However the same in Virtual DOM is just one JavaScript Object maybe like :

    {
  tag: 'div',
  props: {
    id: 'DIV'
  },
  chidren: [
    {
      tag: 'span',
      props: {
        className: 'text-span'
      },
      chidren: [
        'this is a span text'
      ]
    }
  ]
}

    Exchange this JavaScript Object to Real DOM that is like a process of painting,we use different colors to draw and describe it,which is what we called render.If we want to change the color or some attributes of Real DOM,we will be like:

    div.innerHTML='change text'
div.style.cssText='width:100px;height:100px'

    but if we set JavaScript Object’s property and render it once so that we can avoid causeing many times of backflow and redraw.
    so the difference between Real DOM and Virtual DOM:

    1. Virtual DOM is not typeset or redrawn;
    2. The Virtual DOM is rendered only once;
    3. Virtual DOM can modify local rendering;
    Login or Signup to reply.
  7. 0

    DOM (Document Object Model) is a document object model that describes the structure and content of a document, and provides a way to access and manipulate the document. When a browser loads an HTML document, it parses the HTML code and creates a DOM tree, where each element in the tree is an object that can be manipulated to change the structure and content of the document.

    Virtual DOM is a technology used in the React framework, which is a lightweight DOM tree constructed in memory. When the component state changes, React recalculates the virtual DOM and compares it with the previously calculated virtual DOM to identify the changes, and then updates only the changed parts on the real DOM.

    Therefore, the main differences between DOM and virtual DOM are:

    DOM is the actual document object model that exists in the browser, while virtual DOM is a lightweight DOM tree constructed in memory.

    Directly manipulating the DOM may be slow, while using virtual DOM can improve performance because virtual DOM updates only the changed parts.

    Manipulating the DOM requires considering browser compatibility and other issues, while virtual DOM can be used across different platforms.

    DOM is a standard technology, while virtual DOM is only one implementation in the React framework.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search