This content originally appeared on DEV Community and was authored by Aryclenio Barros
Welcome to the Ultimate Front-End Interview Guide. In this series of posts you will find the most demanded topics in Front-End interviews for you to do well in all of them. Even if you are not preparing for an interview right now, this series of posts will keep you up to date and always prepared to explain complex topics related to the most derivative technologies of interface construction.
Are you feeling DOMinated?
If we ask someone who has minimal knowledge of the concept of the web, this person will know what HTML is and its structure. Between so many existing tags and the tree that builds what we see on the screen, we can see and understand the DOM concept.
According to the definition of the mdn web docs:
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 the nodes and objects; that way, programming languages can interact with the page.
In a nutshell, the DOM is a representation of the tree of elements parsed by our browser, whatever it may be. Any modification that changes the style, content or structure of our page represents a change to the DOM.
And where do the other nomenclatures come from? Now let's see the definition of each of them.
Shadow DOM
We can easily define the Shadow DOM as a smaller scale representation of the full DOM. The difference applies to the way they are created, the shadow DOM being divided into individual scopes that can be coupled to the complete tree and the DOM representing the global scope. This concept is used in componentization strategies on the web.
The advantage of using the shadow DOM is that it doesn't affect the global structure, even when talking about styles or event functions.
Virtual DOM
The virtual DOM is a tool implemented by frameworks like Vue and React to trigger a rendering. In practice, the virtual DOM is a representation of the original DOM stored in memory. This in-memory representation is synchronized with the original DOM from time to time, and if there is any difference between them, the framework will start a new rederization to synchronize the information. This process is called reconciliation.
Keeping a copy of the DOM in memory makes it easier to compare information and ensures that we will only use browser resources when they are actually needed.
React Fiber
React Fiber is an idea introduced by React in March 2013 and is a rewrite of the React rendering algorithm that may replace the Virtual DOM concept in a few years. Despite its performance, the current algorithm does not work well with some areas of the web such as animations, which motivated the creation of this new architecture.
The concept is a bit complex, but if you're interested in finding out how we might see React in a few years, you can read this documentation from the React page: https://github.com/acdlite/react-fiber-architecture
Conclusion
Today we discovered the concepts of DOM, Shadow DOM, Virtual DOM and React Fiber. These are extremely important and are often asked in many front-end interviews, so it's good to be prepared. If you have any questions, comment below and I'll be happy to answer.
This post is part of a series of posts, stay tuned and follow me here on dev.to for more posts on the Ultimate Front-end Interview guide.
Follow me on linkedin:
https://www.linkedin.com/in/aryclenio/
This content originally appeared on DEV Community and was authored by Aryclenio Barros
Aryclenio Barros | Sciencx (2022-06-03T19:36:10+00:00) React Fiber, Virtual DOM and Shadow DOM – The Ultimate Front-End Interview Questions Guide Pt: 2. Retrieved from https://www.scien.cx/2022/06/03/react-fiber-virtual-dom-and-shadow-dom-the-ultimate-front-end-interview-questions-guide-pt-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.