Table of contents
1] DOM
- Document object model is an interface that allows a programming language to manipulate the structure, style and the content of the website. It represents HTML document as a hierarchy of nodes.
Each markup is represented by a node in the dom tree.
Each document can have only one document element. In an HTML document, the document element is the <html> element.
Browser parses HTML (static strings of text) into a data model (objects/nodes).
DOM is cross-platform and language independent.
Cross-Platform: Works on various operating systems and environments.
Language-Independent: Can be used with any programming language that can interact with the DOM API.
For example, Python doesn't natively run in the browser like JavaScript, you typically interact with the DOM in Python for web scraping, automated testing, or server-side processing of HTML content. some common libraries for DOM Manipulation in Python: BeautifulSoup: For parsing and navigating HTML and XML. Selenium: For interacting with the DOM of live web pages in a browser, automating browser tasks.
2] Issue with Real DOM
It re-renders entire DOM elements for a small UI (user interface) change also.
When the DOM updates, it has to update the node as well as re-paint the page with its corresponding CSS and layout
Now it’s common to have a thousands node in a single SPA. So repainting the whole page for each change is time consuming which makes our website slow.
DOM was originally intended for static UIs — pages rendered by the server that don’t require dynamic updates.
3] Virtual DOM
- It is a lightweight copy of original DOM but it cannot directly make changes in the UI.
- it is a virtual representation of the actual DOM elements in memory. It's not the actual DOM that is rendered on the screen.
How Virtual DOM works in React?
- As react uses component based architecture. Whenever the state of any component changes, virtual Dom is updated.
React Maintains Two Versions of the Virtual DOM:
Current Virtual DOM (pre-update): This is the version of the Virtual DOM that represents the state of the UI before any updates are made.
Updated Virtual DOM: When a change occurs (e.g., due to state or props updates), React creates a new Virtual DOM that represents what the UI should look like after the update.
Diffing Process
React compares the current Virtual DOM (pre-update) with the updated Virtual DOM to determine the differences between the two.
This comparison process is called "diffing."
The diffing algorithm identifies the minimal set of changes (e.g., adding, removing, or updating elements) required to update the real DOM to match the updated Virtual DOM.
Finally react Updates only the changed nodes in the real DOM leaving the rest of the nodes as it is.
It groups together several changes and does a single re-render instead of many small ones. This entire process of updating the DOM is known as Reconciliation.
4] Shadow DOM
Shadow Dom is a separate DOM for an element which comes in small pieces and doesn't represent the whole DOM.
It is a Web Component standard that allows web developers to create compartmentalized DOM and CSS for web components.
Structure of shadow DOM.
It is generated by the browser for you in a completely isolated DOM Tree called the Shadow Tree.
It is normally hidden from us, but we can see it in the developer tools-> setting ->preferences. we need to allow “Show user agent shadow DOM” option in Dev Tools.
Shadow Tree comes complete with its own elements and styling that is added to an element as a child. The element to which the tree is added is called Shadow Host and the root is called Shadow Root.
Shadow Dom API provides a way to attach hidden separated DOM to an element.
Use of shadow DOM.
Shadow DOM is used for encapsulation. It allows the author of a component to build its own DOM, which is separate from a regular DOM.
Shadow DOM ensures that all JavaScript and CSS written against this new DOM can be fully encapsulated, and its results are shielded against CSS declared in a global field unless the component allows it to do so.
The concept of Shadow DOM is thoroughly explained in the YouTube video from the Code Step by Step channel.