💡
My Docs
BlogLinkedin
WEB_DEV_JOB_SEARCH
WEB_DEV_JOB_SEARCH
  • Home
  • 🏡Home
  • 🗺️Navigation
  • 📥Useful Downloads
  • TO DO
    • Meetings:
    • Take Home Assignments
  • Jobs To Apply To
  • 🛠️Skills
    • 🍢My Stack
    • E-Engineering
    • SQL / PSQL
  • 📋Filling Out Forms
  • 📖Resources
    • Linkedin Cheat Shee
    • Job Search Advice
    • Orientation:
    • Links
    • Running List Of MISC Resources:
    • ❄️Cold Outreach Generator
  • Profiles
  • Linkedin
  • Examples
  • Resume
    • Resume
      • Certificate (Lambda)
      • Examples
      • Advice
      • Dice
      • Linkedin Resume
      • Indeed Resume
  • Applications
    • 🖱️TRACKING_APPLICATIONS
    • Amazon
  • Applications & Job Postings
    • Job Boards
      • More Job Boards
    • 📮Postings:
      • Avid / Pro Tools
      • Amazon
      • My Applications
        • Application Info
        • In Progress
      • First Round Of Applications
      • Jobs To Keep Track Of
      • Recommended Jobs
  • Cover Letter
    • Cover Letter
      • CV-Guidance
    • More Advice
      • Practice Problems:
    • Example
    • Example Of Developer Bio
    • Old Engineering Cover Letter
  • Portfolio
    • 💾Git Repo
    • 🖼️Portfolio
  • 📈Slack&Lambda
    • 📺Recordings
    • 🧑‍🤝‍🧑🧑🤝🧑 🧑🤝🧑 🧑People
  • Aux-Resources
    • Youtube
    • 👨‍🏫👨🏫 👨🏫 👨Guidance
  • 🖋️Interview Prep
    • INTERVIEW
    • 👨‍💻👨💻 👨💻 👨💻 👨💻 👨💻 👨💻 👨💻 Leetcode
      • 37-Essential-Js-Questions
      • 📈Rubric
    • Resources
      • List of List
      • Cheat-Sheet
    • Cheat-Sheet-Raw
    • General Advice & Tips
      • Website Checklist
      • Phone Interview Advice
    • Overview
      • Data-Structures Q & A
    • Web Dev Interview Questions
      • FULL-STACK DEVELOPER INTERVIEW QUESTIONS AND ANSWERS
    • ⁉️Interview Questions.
      • cross-site scripting attack (XSS) and how do you prevent it?
      • What are refs in React? When should they be used?
      • virtual DOM and why is it used in libraries/frameworks?
      • What does the following code evaluate to?
      • What is the this keyword and how does it work?
      • What are landmark roles and how can they be useful?
      • What is the difference between lexical scoping and dynamic scoping?
      • What is the difference between null and undefined?
      • What is CSS BEM?
      • What is HTML5 Web Storage? Explain localStorage and sessionStorage.
      • How can you avoid callback hells?
      • What is functional programming?
      • useful example of one?
      • What is an async function?
      • What is the difference between the equality operators == and ===?
      • use-strict
      • sync-vs-async
      • null-vs-undefined
      • promises
      • accessibility-tree
        • imperative-vs-declarative
      • bem
      • cors
      • alt-attribute
    • Qualitative Questions
      • Cheat Sheets
        • Python-VS-JS Cheat Sheet
        • 🐍Python
      • React Interview
        • React Questions:
      • Front End Questions
    • 🧮DS_ALGO Practice:
      • Algorithms
      • Exampes
      • DS_ALGO_NOTES
        • The queue data structure (JS)(PY)
    • Behavorial
      • Python Subpage
      • DS_&_ALGO_STUDY_GUIDE
      • Intro 2 Graphs:
      • Graphs
        • Graph (py)
      • Free Code Camp
      • Types Of Data Structures
      • Arrays
      • Page 2
      • 🥅Hash Tables
    • FANG PREP (medium article)
    • ⏱️More Practice:
    • 300 React Q & A's
      • 💸React Tips
    • Redux
    • 🛕Examples
      • Representing A Graph:
      • Anagrams & Big O
        • Python Performance
        • Strongly Connected Graph
      • Gists
    • Common Knowledge Questions
  • Tutorials
    • Custom Outreach Message Generator
      • Common Questions
      • Self Introduction
  • Technical Interview Tutorial
  • Job Boards
    • 📋Job Boards
      • Less Promising Job Boards
      • LIST OF BOARDS
  • Networking
    • 🗓️Events
  • MISC
    • Articles To Read
    • Job Search Images
  • Notes
    • Interview Navigation
    • Notes
    • CSS Interview Prep Quiz
  • 🖨️Interviewing
    • General
    • Inspiration
    • Front End Interview
    • Common Questions
  • Networking
    • Networking
      • a/A Email List
    • Page 1
  • 📓ARCHIVE
    • Archive
      • ❇️Slack Announcements
    • Projects
Powered by GitBook
On this page
  • Answer
  • Good to hear
  • Additional links

Was this helpful?

Edit on GitHub
  1. Interview Prep
  2. Interview Questions.

virtual DOM and why is it used in libraries/frameworks?

Answer

The virtual DOM (VDOM) is a representation of the real DOM in the form of plain JavaScript objects. These objects have properties to describe the real DOM nodes they represent: the node name, its attributes, and child nodes.

<div class="counter">
  <h1>0</h1>
  <button>-</button>
  <button>+</button>
</div>

The above markup's virtual DOM representation might look like this:

{
  nodeName: "div",
  attributes: { class: "counter" },
  children: [
    {
      nodeName: "h1",
      attributes: {},
      children: [0]
    },
    {
      nodeName: "button",
      attributes: {},
      children: ["-"]
    },
    {
      nodeName: "button",
      attributes: {},
      children: ["+"]
    }
  ]
}

The library/framework uses the virtual DOM as a means to improve performance. When the state of an application changes, the real DOM needs to be updated to reflect it. However, changing real DOM nodes is costly compared to recalculating the virtual DOM. The previous virtual DOM can be compared to the new virtual DOM very quickly in comparison.

Once the changes between the old VDOM and new VDOM have been calculated by the diffing engine of the framework, the real DOM can be patched efficiently in the least time possible to match the new state of the application.

Good to hear

  • Why accessing the DOM can be so costly.

Additional links

PreviousWhat are refs in React? When should they be used?NextWhat does the following code evaluate to?

Last updated 3 years ago

Was this helpful?

🖋️
⁉️
The difference between Virtual DOM and DOM