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.

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.

• javascript
• reactjs
• dom

6 Answers 6

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.

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;

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 programming concept used in the React library, 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 library.

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.

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.

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