Understanding Virtual DOM and Popular Implementations

What is Virtual DOM?

Virtual DOM is an in‑memory abstraction of the real DOM. In front‑end development, directly manipulating the DOM can be inefficient because DOM operations are costly. The virtual DOM allows changes to be made on a lightweight JavaScript object, then a diff algorithm (e.g., React’s) determines the minimal updates to apply to the real DOM, greatly reducing unnecessary operations and improving rendering performance.

Many mainstream front‑end frameworks, such as React, Vue, and Preact, use virtual DOM technology.

Virtual DOM Implementations

Million.js

Million.js is a full‑featured, fine‑tuned virtual DOM library that reduces diff overhead and claims to boost React component rendering speed by up to 70%. The project has earned 15.5k stars on GitHub and is worth studying.

GitHub: https://github.com/aidenybai/million

Snabbdom

Snabbdom is a lightweight and efficient virtual DOM library that lets developers express views as functions and offers a flexible, extensible modular architecture. Its core code is very concise, about 200 lines, making it easy to understand.

GitHub: https://github.com/snabbdom/snabbdom

virtual-dom

This is a classic virtual DOM implementation with 11.6k stars on GitHub.

GitHub: https://github.com/Matt-Esch/virtual-dom

blockdom

blockdom claims to be the world’s fastest virtual DOM library, using a block‑based diffing method rather than element‑by‑element, which significantly speeds up rendering by simplifying the diff process and reducing the virtual DOM tree size.

GitHub: https://github.com/ged-odoo/blockdom

Maquette

Maquette is a pure and simple virtual DOM library.

GitHub: https://github.com/AFASSoftware/maquette

Other Libraries

simple-virtual-dom: a simple virtual DOM algorithm with only 500 lines of code, covering basic ideas. GitHub: https://github.com/livoras/simple-virtual-dom

petit-dom: an ultra‑minimal virtual DOM library. GitHub: https://github.com/yelouafi/petit-dom

Other Articles

Git severe vulnerability, remote code execution, affects Mac and Windows!

What does if __name__ == '__main__' mean in Python?

Interview: Which rejection policy to choose when a thread pool cannot discard tasks?

Why should the number of shards in sharding be a power of two?

Meituan on‑site interview: Do you understand the SPI mechanism? What is the most important part?