3

What's the difference, why is it faster to access Virtual DOM than just DOM?

Shreyas
  • 1,927
  • 17
  • 34
  • read the following link [click here](http://reactkungfu.com/2015/10/the-difference-between-virtual-dom-and-dom/) – Salman Oct 20 '17 at 07:03
  • 1
    Quoting from @salmankhan's link: *The Virtual DOM is an abstraction of the HTML DOM. It is lightweight and detached from the browser-specific implementation details.* – Filnor Oct 20 '17 at 07:05
  • This might be helpful as well: https://stackoverflow.com/questions/21965738/what-is-virtual-dom – Fabian S. Oct 20 '17 at 07:19
  • I am talking in context of their memory representation – Shreyas Oct 20 '17 at 07:22
  • 2
    Both are a mix of fixed-layout structs and hashtables. The difference is that virtual dom usually has to carry less internal information than real dom nodes. But the precise memory layouts are implementation-dependent in either case. – the8472 Oct 21 '17 at 12:58

1 Answers1

2

What's the difference

The virtual DOM is any in-memory representation of the real DOM elements.

It is an abstraction over the real HTML DOM and the level of abstraction varies based on how much details you want to keep in virtual DOM.

Usually, first the changes are made to in-memory objects before rendering the same to via real HTML DOM page.

why is it faster to access Virtual DOM than just DOM?

Virtual DOM is already in memory, on the other hand real DOM has to be accessed from page and loaded to memory for any operation.

Simple Example

Lets say you want to render a simple list of items, and only following properties of each list item is of concern to you

  • Background-color
  • Display value
  • Font size and color
  • Alignment (left, center or right aligned)

Since only these properties matter to your feature, you need a data structure to store these

var listObj = {
   "properties" : {
      "background-color" : "#ccc"
   },
   "children" : [
      {
         "properties" : { "value" : "item-a", "font-size" : "12px", "color" : "red", "h-align" : "left" }
      },
      {
         "properties" : { "value" : "item-b", "font-size" : "12px", "color" : "red", "h-align" : "left" }
      },
      {
         "properties" : { "value" : "item-c", "font-size" : "12px", "color" : "red", "h-align" : "left" }
      }
   ],
   removeItem : function( item ){ /* Logic to remove an item and render the udpated list */ },
   addItem : function( item ){ /* Logic to add an item and render the udpated list */ },
   renderList : function(){ /* Logic to render the udpated list */ }
};

Now, notice that listObj has only limited number of properties and methods to render and manipulate the list.

Only function invocation is required, relatively complex task like rendering the list, removing an item, etc are abstracted.

Relatively more-complex example

Similarly, think of a generic form object which contains properties to support different kind of controls like label, input boxes, select boxes, etc including properties specific to each of these different controls such as a select-box may have source of data (which could be an ajax call).

To represent such properties and methods required to manipulate them, would require more elaborate data-structure, for example

var genericFormObj = {
  "name" : "",
  "action" : "",
  "form-attributes" : [
      {
         "order-of-display" : 1, "type" : "label", "value" : "" , "id" : ""
      },
      {
         "order-of-display" : 2, "type" : "textbox", "value" : ""  , "id" : ""
      }
   ]
}
gurvinder372
  • 66,980
  • 10
  • 72
  • 94