無虛擬 DOM 框架

最近 Vue 在美國舉辦了 Vue Conf 2022，因爲尤雨溪在 Vue Conf 上說他們正在探索一種新的編譯策略，就是無虛擬 DOM 模式！

不知大家發現沒有，自從 2021 年以來，無虛擬 DOM 框架 / 庫 / 編譯器獲得了極大的關注，最爲典型的兩個項目：Svelte 和 SolidJS。

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

與使用虛擬（virtual）DOM 差異對比不同。Svelte 編寫的代碼在應用程序的狀態更改時就能有針對性的更新 DOM。

Svelte 的核心思想在於『通過靜態編譯減少框架運行時的代碼量』。舉例來說，當前的框架無論是 React Angular 還是 Vue，不管你怎麼編譯，使用的時候必然需要『引入』框架本身，也就是所謂的運行時 (runtime)。但是用 Svelte 就不一樣，一個 Svelte 組件編譯了以後，所有需要的運行時代碼都包含在裏面了，除了引入這個組件本身，你不需要再額外引入一個所謂的框架運行時！

當然，這不是說 Svelte 沒有運行時，但是出於兩個原因這個代價可以變得很小：

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

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

會被編譯成如下代碼：

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 操作，自然可以省去大量代碼，同時，性能上也和 vanilla JS 相差無幾（僅就這個簡單示例而言），內存佔用更是極佳。這個思路其實並不是它首創，之前有一個性能爆表的模板引擎 Monkberry.js 也是這樣實現的，ng2 的模板編譯其實也跟這個很類似（但是中間加了一層渲染抽象層）。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/G9-gErYtg8jOvpbQp6mRlw