What is Virtual DOM?
Over the past year, I've heard a lot about Virtual DOM and React JS.
React is really fast and very simple, but how does it work? What is Virtual DOM? Why should I worry about this, and what happened to the good old plain DOM?
Before we begin to delve into what DOM is virtual, let's talk a little about what DOM is real.
DOM (abbreviation for the Document Object Model) is a way of representing a structured document using objects. It is a cross-platform and language-independent agreement for the presentation and interaction with data in HTML, XML, etc.
Web browsers handle the components of the DOM, and we can interact with them using JavaScript and CSS. We can work with document nodes, change their data, delete and insert new nodes. Nowadays, the DOM API is practically cross-platform and cross-browser.
So what's the problem?
')
The main problem of the DOM is that it was never designed to create a dynamic user interface (UI). We can work with it using JavaScript and libraries like jQuery, but using them does not solve performance problems.
Look at modern social networks like Twitter, Facebook or Pinterest.
After a little scrolling, we will have tens of thousands of DOM nodes, and interacting with them effectively is not an easy task.
For example, try moving 1000 divs 5 pixels left.
It may take more than a second - this is too much for the modern Internet. You can optimize the script and use some tricks, but in the end it will only cause a headache when working with huge pages and dynamic UI.
Can we solve this problem? It looks like we can.
Currently, the W3C is working on a new Shadow DOM standard.
Shadow DOM is a working draft of the W3C standard. A specification describing the method of merging several DOM trees into one hierarchy and how these trees interact with each other within a document, which makes it possible to better group the DOM.
Another option is to use the Virtual DOM approach.
Virtual DOM is not a standard and ultimately we still interact with the DOM, but we do it as rarely as possible and more efficiently.
Instead of interacting with the DOM directly, we work with its lightweight copy. We can make changes to the copy based on our needs, and then apply the changes to the real DOM.
When this happens, a DOM tree is compared with its virtual copy, the difference is determined and a redrawing of what has been changed is launched.
This approach works faster, because it does not include all the heavyweight parts of the real DOM.
But only if we do it right. There are two problems: when exactly to re-redraw the DOM and how to do it effectively.
When?
When the data changes and needs to be updated.
There are two options for finding out that the data has changed:
How?
What makes this approach really fast:
As you understand, this is not so simple and the implementation can be quite complicated, but there are some libraries that help implement this approach in our projects.
One of these most famous libraries is React from the Facebook team.
React JS is a JavaScript library developed by Facebook for building user interfaces that popularized the idea of using a virtual DOM. React creates a lightweight tree from JavaScript objects to simulate a DOM tree. It then creates HTML from them, which is inserted or added to the desired DOM element, which causes the page to be redrawn in the browser.
React is a library, not a framework, so comparing it with Angular or Ember is incorrect.
Virtual DOM is a technique and a set of libraries / algorithms that allow us to improve performance on the client side, avoiding direct work with the DOM by working with a lightweight JavaScript object that mimics the DOM tree.
The idea of using a virtual DOM is excellent, although it is not new - we have long known that direct work with DOM is expensive. Using libraries like React, we can improve application performance and make it very simple.
Original article: What is Virtual DOM
Note: some liberties are allowed in the translation, but within reason.
React is really fast and very simple, but how does it work? What is Virtual DOM? Why should I worry about this, and what happened to the good old plain DOM?
What is DOM
Before we begin to delve into what DOM is virtual, let's talk a little about what DOM is real.
DOM (abbreviation for the Document Object Model) is a way of representing a structured document using objects. It is a cross-platform and language-independent agreement for the presentation and interaction with data in HTML, XML, etc.
Web browsers handle the components of the DOM, and we can interact with them using JavaScript and CSS. We can work with document nodes, change their data, delete and insert new nodes. Nowadays, the DOM API is practically cross-platform and cross-browser.
So what's the problem?
')
DOM problem
The main problem of the DOM is that it was never designed to create a dynamic user interface (UI). We can work with it using JavaScript and libraries like jQuery, but using them does not solve performance problems.
Look at modern social networks like Twitter, Facebook or Pinterest.
After a little scrolling, we will have tens of thousands of DOM nodes, and interacting with them effectively is not an easy task.
For example, try moving 1000 divs 5 pixels left.
It may take more than a second - this is too much for the modern Internet. You can optimize the script and use some tricks, but in the end it will only cause a headache when working with huge pages and dynamic UI.
Can we solve this problem? It looks like we can.
Currently, the W3C is working on a new Shadow DOM standard.
Shadow DOM is a working draft of the W3C standard. A specification describing the method of merging several DOM trees into one hierarchy and how these trees interact with each other within a document, which makes it possible to better group the DOM.
Another option is to use the Virtual DOM approach.
Virtual DOM is not a standard and ultimately we still interact with the DOM, but we do it as rarely as possible and more efficiently.
Virtual dom
Instead of interacting with the DOM directly, we work with its lightweight copy. We can make changes to the copy based on our needs, and then apply the changes to the real DOM.
When this happens, a DOM tree is compared with its virtual copy, the difference is determined and a redrawing of what has been changed is launched.
This approach works faster, because it does not include all the heavyweight parts of the real DOM.
But only if we do it right. There are two problems: when exactly to re-redraw the DOM and how to do it effectively.
When?
When the data changes and needs to be updated.
There are two options for finding out that the data has changed:
- The first of these, “dirty checking,” is to interrogate data at regular intervals and recursively check all values in the data structure.
- The second option - “observable” (observable) is to observe the change of state. If nothing has changed, we do nothing. If changed, we know exactly what needs to be updated.
How?
What makes this approach really fast:
- Efficient comparison algorithms
- Grouping read / write operations while working with DOM
- Effective update only under-trees
As you understand, this is not so simple and the implementation can be quite complicated, but there are some libraries that help implement this approach in our projects.
One of these most famous libraries is React from the Facebook team.
React JS
React JS is a JavaScript library developed by Facebook for building user interfaces that popularized the idea of using a virtual DOM. React creates a lightweight tree from JavaScript objects to simulate a DOM tree. It then creates HTML from them, which is inserted or added to the desired DOM element, which causes the page to be redrawn in the browser.
React is a library, not a framework, so comparing it with Angular or Ember is incorrect.
Other libraries and frameworks
- virtual-dom - the implementation of Virtual DOM from Matt Esch, an algorithm for comparing differences.
- Mithril - Javascript framework for creating bright applications.
- Bobril - Component-oriented framework inspired by the approaches of Mithril and ReactJs.
- cito.js is a JavaScript framework for building fast, scalable, and modular web applications.
Conclusion
Virtual DOM is a technique and a set of libraries / algorithms that allow us to improve performance on the client side, avoiding direct work with the DOM by working with a lightweight JavaScript object that mimics the DOM tree.
The idea of using a virtual DOM is excellent, although it is not new - we have long known that direct work with DOM is expensive. Using libraries like React, we can improve application performance and make it very simple.
From translator
Original article: What is Virtual DOM
Note: some liberties are allowed in the translation, but within reason.
Source: https://habr.com/ru/post/256965/
All Articles