Versus
    32-bit vs 64-bit
    Annotations vs Decorators
    BigQuery vs Bigtable
    Block Storage vs File Storage vs Object Storage
    C vs C++
    Canvas vs SVG
    Constructor vs Init() vs Factory
    Containers vs Virtual Machines (VMs)
    DOM vs Virtual DOM vs Shadow DOM
    DQL vs DDL vs DCL vs DML
    Dagger vs Guice
    Data Mining vs Machine Learning vs Artificial Intelligence vs Data Science
    Flux vs Redux
    GCP API Gateway vs Cloud Endpoint
    GCP Cloud Run vs Cloud Functions vs App Engine
    GCP DataFlow vs Dataproc
    Google Analytics 4 vs Universal Analytics
    Google Internal vs Open Source
    HEIC vs HEIF vs HEVC vs JPEG
    Java vs C++
    Jetty vs Netty
    Kotlin vs Java
    LLVM vs JVM
    Linux vs BSD
    Microcontroller vs Microprocessor vs Computer
    Node.js vs Erlang
    POSIX vs SUS vs LSB
    Pass-by-value vs Pass-by-reference
    Proto2 vs Proto3
    PubSub vs Message Queue
    REST vs SOAP
    React vs Flutter vs Angular
    Rust vs C++
    SLI vs SLO vs SLA
    SRAM vs DRAM
    SSD vs HDD
    Software Engineer vs Site Reliability Engineer
    Spanner vs Bigtable
    Stack based VM vs Register based VM
    Stateless vs Stateful
    Static Site Generation vs Server-side Rendering vs Client-side Rendering
    Strong Consistency vs Eventual Consistency
    Subroutines vs Coroutines vs Generators
    Symlinks vs Hard Links
    Tensorflow vs PyTorch
    Terminal vs Shell
    Vi vs Vim vs gVim vs Neovim
    WAL vs rollback journal
    gtag vs Tag Manager
    stubs vs mocks vs fakes

DOM vs Virtual DOM vs Shadow DOM

Updated: 2022-04-25

TL;DR

  • "real" DOM: represents what you see on your screen; One page have one single DOM; any change will make a rerending of the whole object.
  • Virtual DOM and Shadow DOM are trying to resolve the performance issue in different ways:
    • Virtual DOM is creating a copy of the whole DOM object and keep it in memory to track changes
    • Shadow DOM creates small pieces of the DOM object which has their own, isolated scope for the element they represent.
  • Examples: React.js uses Virtual DOM; Lit (based on Web Components) uses Shadow DOM; Solid.js uses real DOM.

DOM

  • the browser parses the HTML to a tree-like structure; each tree node is an object.
  • JavaScript can access and do changes in the DOM. window.document.
  • The whole page is a single big DOM tree. Performance issue: Every change will make a re-rendering of the whole object.

Virtual DOM

  • Defined and managed by React, to mirror the real DOM (It saves a copy of DOM in memory)
  • faster to chagne; changes to the states will first be applied to Virtual DOM; only if it requires UI Changes, ReactDOM will then update the real DOM.

Shadow DOM

  • comes in small pieces; it does not represent the whole DOM, only sub-trees.
  • Shadow DOM creates a scoped tree that connects to an element; the element is called shadow host.
  • everything added to Shadow DOM is local (including styles).
  • Benefits:
    • it isolates the DOM, the component is a separate element that does not appear in the DOM.
    • it simplifies styling: styles created in a single Shadow DOM element is isolated.
  • An application using Shadow DOM is not one single big tree, but built on components.