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

Virtual-DOM 是什么？

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

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

Virtual-DOM 案例

Million.js

Million.js 是一個(gè)完整的并且經(jīng)過微調(diào)和優(yōu)化的虛擬 DOM 庫，減少了 Diff 的開銷，其宣稱可以使 React 的組件渲染速度提高 70%。這個(gè)項(xiàng)目在 Github 上已獲得 15.5看 Star，值的學(xué)習(xí)。

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

Snabbdom

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

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

virtual-dom

這是虛擬 DOM 的一個(gè)很經(jīng)典的實(shí)現(xiàn)，在 Github 上擁有 11.6k Star。

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

blockdom

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

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

Maquette

Maquette 是一個(gè)純粹而簡單的虛擬 DOM 庫。

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

其他

• simple-virtual-dom：

• 簡介：簡單的虛擬 dom 算法，代碼只有 500 行，包括虛擬 DOM 算法非?；镜乃枷?。
• Github：https://github.com/livoras/simple-virtual-dom。

• petit-dom：

• 簡介：一個(gè)極簡的虛擬 DOM 庫。

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