在知乎上有一個問題：“前端開發中有什么經典的輪子值得自己去實現一遍?”。問題下有很多前端界大佬的回答。其中，尤大的回答中很簡單：Virtual-DOM。本文就來看看 Virtual-DOM 是什么，并分享一些可參考的實現案例。

Virtual-DOM 是什么？

Virtual-DOM 即虛擬 DOM，它是對真實 DOM 的一個內存中的抽象表示。在前端開發中，當需要更新頁面時，傳統的直接操作 DOM 的方式可能會非常低效，因為 DOM 操作本身就很昂貴。虛擬 DOM 的引入允許在一個輕量級的 JavaScript 對象（即虛擬 DOM）上進行更改，然后通過一種高效的比較算法（如 React 的 Diff 算法）來確定哪些更改需要實際應用到真實的 DOM 上。這樣可以大大減少不必要的 DOM 操作，從而顯著提高頁面渲染性能。

目前，很多主流前端框架都使用了虛擬 DOM 技術，比如：React、Vue、Preact。

Virtual-DOM 案例

Million.js

Million.js 是一個完整的并且經過微調和優化的虛擬 DOM 庫，減少了 Diff 的開銷，其宣稱可以使 React 的組件渲染速度提高 70%。這個項目在 Github 上已獲得 15.5看 Star，值的學習。

Github：https://github.com/aidenybai/million。

Snabbdom

Snabbdom 是一個輕量級且高效的虛擬 DOM 庫，它允許開發者以函數的形式來表達程序視圖，同時提供了靈活且可拓展的模塊化結構。Snabbdom 的核心代碼非常簡潔，大約只有200行，理解起來比較簡單。

Github：https://github.com/snabbdom/snabbdom。

virtual-dom

這是虛擬 DOM 的一個很經典的實現，在 Github 上擁有 11.6k Star。

Github：https://github.com/Matt-Esch/virtual-dom。

blockdom

blockdom 自稱是世界上最快的虛擬 DOM 庫，它通過獨特的按塊而非按元素進行差異計算的方法，顯著提升了渲染速度。這種設計使得 blockdom 能夠高效直接復制整塊內容，從而極大地簡化了 diff 過程，并因虛擬 DOM 樹的大幅精簡而進一步提升了性能。

Github：https://github.com/ged-odoo/blockdom。

Maquette

Maquette 是一個純粹而簡單的虛擬 DOM 庫。

Github：https://github.com/AFASSoftware/maquette。

其他

• simple-virtual-dom：

• 簡介：簡單的虛擬 dom 算法，代碼只有 500 行，包括虛擬 DOM 算法非常基本的思想。
• Github：https://github.com/livoras/simple-virtual-dom。

• petit-dom：

• 簡介：一個極簡的虛擬 DOM 庫。

• Github：https://github.com/yelouafi/petit-dom。