無虛擬 DOM 框架

最近 Vue 在美國舉辦了 Vue Conf 2022，因?yàn)橛扔晗?Vue Conf 上說他們正在探索一種新的編譯策略，就是無虛擬DOM模式！

不知大家發(fā)現(xiàn)沒有，自從2021年以來，無虛擬DOM框架/庫/編譯器獲得了極大的關(guān)注，最為典型的兩個(gè)項(xiàng)目：Svelte 和 SolidJS。

Svelte 是一種全新的構(gòu)建用戶界面的方法。傳統(tǒng)框架如 React 和 Vue 在瀏覽器中需要做大量的工作，而 Svelte 將這些工作放到構(gòu)建項(xiàng)目的編譯階段來處理。

與使用虛擬（virtual）DOM 差異對比不同。Svelte 編寫的代碼在應(yīng)用程序的狀態(tài)更改時(shí)就能有針對性的更新 DOM。

Svelte 的核心思想在于『通過靜態(tài)編譯減少框架運(yùn)行時(shí)的代碼量』。舉例來說，當(dāng)前的框架無論是 React Angular 還是 Vue，不管你怎么編譯，使用的時(shí)候必然需要『引入』框架本身，也就是所謂的運(yùn)行時(shí) (runtime)。但是用 Svelte 就不一樣，一個(gè) Svelte 組件編譯了以后，所有需要的運(yùn)行時(shí)代碼都包含在里面了，除了引入這個(gè)組件本身，你不需要再額外引入一個(gè)所謂的框架運(yùn)行時(shí)！

當(dāng)然，這不是說 Svelte 沒有運(yùn)行時(shí)，但是出于兩個(gè)原因這個(gè)代價(jià)可以變得很?。?/p>

Svelte 的編譯風(fēng)格是將模板編譯為命令式 (imperative) 的原生 DOM 操作。比如這段模板：

<a>{{ msg }}</a>

會(huì)被編譯成如下代碼：

function renderMainFragment ( root, component, target ) {    var a = document.createElement( 'a' );
    var text = document.createTextNode( root.msg );    a.appendChild( text );
    target.appendChild( a )
    return {        update: function ( changed, root ) {            text.data = root.msg;        },
        teardown: function ( detach ) {            if ( detach ) a.parentNode.removeChild( a );        }    };}

可以看到，跟基于 Virtual DOM 的框架相比，這樣的輸出不需要 Virtual DOM 的 diff/patch 操作，自然可以省去大量代碼，同時(shí)，性能上也和 vanilla JS 相差無幾（僅就這個(gè)簡單示例而言），內(nèi)存占用更是極佳。這個(gè)思路其實(shí)并不是它首創(chuàng)，之前有一個(gè)性能爆表的模板引擎 Monkberry.js 也是這樣實(shí)現(xiàn)的，ng2 的模板編譯其實(shí)也跟這個(gè)很類似（但是中間加了一層渲染抽象層）。