又一個(gè)前端框架 Solid ？性能直逼原生 JS ？

關(guān)注并將「趣談前端」設(shè)為星標(biāo)

每天定時(shí)分享技術(shù)干貨/優(yōu)秀開源/技術(shù)思維

Solid 是什么？Solid 號稱擁有 JSX 語法，類似于 React hook 的語法，你可以用現(xiàn)代化的開發(fā)方式，獲得性能最快的代碼。真正的既要又要還要。

到底有多快，我們看看 Benchmark

原生 JS 是 1， Solid 1.05， 比 Svelte 也快，React 跑到了 1.93 。為什么這么快？讓我們來揭開神秘的面紗。官方也提供了 playground，可以實(shí)時(shí)看到打包后的代碼，不如上去動(dòng)手感受一下～

首先，官方代碼如下：

import?{?render?}?from?"solid-js/web";
import?{?createSignal,?createEffect,?createMemo,?mapArray?}?from?"solid-js";

function?CounterNum()?{
??const?[count,?setCount]?=?createSignal(0);
??const?increment?=?()?=>?setCount(count()?+?1);

??createEffect(()?=>?{
????console.log("i?am?alive");
??});

??return?(
????<>
??????<button?type="button"?onClick={increment}>
????????{count()}
??????button>
????
??);
}

這個(gè)代碼，看起來，可以說跟 React Hook 一毛一樣了，可以理解，也期望以后新創(chuàng)建的框架，都可以往 React 等框架語法靠攏。而不是又創(chuàng)建一套新的語法。真的學(xué)不動(dòng)啊，程序員不要內(nèi)卷程序員。這點(diǎn) Solid 框架作者就做得不錯(cuò)。

那為什么快，猜測有三點(diǎn)：

1. 直接使用瀏覽器的 DOM, 沒有虛擬 DOM， DOM diff 一整套算法
2. 響應(yīng)式原理，精準(zhǔn)更新對應(yīng)的值
3. 提前編譯，更小的包體積，尺寸小

一、 直接使用瀏覽器的 DOM, 沒有虛擬 DOM， DOM diff 一整套算法

我們看一下他編譯出來的代碼，可以發(fā)現(xiàn)，他的 DOM ，是原生 DOM ，其他的語法是直接調(diào)用的，也沒有那一整套復(fù)雜的虛擬 DOM

二、提前編譯，按需打包

無論是 react 還是 vue ，不管怎么編譯，都需要引入框架本身。也就是 runtime 。而且這個(gè)體積還比較大。這些框架都采用的是用運(yùn)行時(shí)方案，運(yùn)行時(shí)方案相比于編譯時(shí)方案，最大的優(yōu)勢是可以「幾乎沒有任何語法約束」的去完成代碼編寫。而 Solid 則預(yù)編譯，將 jsx 部分的代碼，轉(zhuǎn)換成原生的語法。

我們直接看代碼， 如果把對應(yīng)的 click 事件去掉，看看 build 之后的代碼是怎么樣的。

可以看到，delegateEvents(["click"]); 這一行代碼不見了，也不會(huì)引入 delegateEvents 這個(gè)方法。這個(gè)特性非常厲害，這樣可以得到最小的包體積。

三、響應(yīng)式原理，精準(zhǔn)更新對應(yīng)的值

如果了解 React 的原理，就會(huì)知道，只要是 props 或者 state 改變，React 組件就會(huì)重新渲染，而每一次判斷是否會(huì)重新改變，值是否不一樣，也是一整套算法…… Solid 不一樣，他另辟蹊徑，每一個(gè)組件都是一個(gè)獨(dú)立的線程，每個(gè)組件里的 createMemo 或 createEffect 里面去收集對應(yīng)的依賴， 在 set 改變值后，都會(huì)重新執(zhí)行這些方法。看起來就像是實(shí)時(shí)更新了一樣。

核心的原理可以用下面兩段代碼來展示：

從這兩段代碼，他就可以實(shí)現(xiàn)，當(dāng) value 值改變時(shí)，會(huì)自動(dòng)重新渲染 createMemo，createEffect 里的方法，自動(dòng)更新 DOM 對應(yīng)的值。響應(yīng)式變化。

如果還是不理解的話，可以看一下下面這張圖，其實(shí)就是使用了 發(fā)布-訂閱方式：

關(guān)鍵的步驟如下：

1. createeffect 分析依賴還有回調(diào)，存入全局變量
2. read 的時(shí)候，如果有這個(gè)依賴對應(yīng)的值，則放入 subscriptions。為什么這里需要使用 {count()} 函數(shù)才能讀取值也是因?yàn)檫@期間要處理一些事情。
3. write 的時(shí)候，去 subscriptions 里面觸發(fā)對應(yīng)的函數(shù)

總結(jié)

我們分析了 Solid 為什么性能這么快，主要從下面三個(gè)方面來講：

1. 直接使用瀏覽器的 DOM, 沒有虛擬 DOM， DOM diff 一整套算法
2. 響應(yīng)式原理，精準(zhǔn)更新對應(yīng)的值
3. 提前編譯，更小的包體積，尺寸小

學(xué)習(xí)借鑒下原理挺不錯(cuò)的，在生產(chǎn)環(huán)境中使用還是算了，畢竟一個(gè)新框架前期正處于快讀迭代的過程中，肯定會(huì)有一堆棄用的api。且他的生態(tài)距離 react，vue 的生態(tài)，還需要發(fā)展幾年。選用一個(gè)框架，如果考量他的性能，也要考量可維護(hù)性，編碼效率等…

前端的技術(shù)發(fā)展，從原生 DOM ，到虛擬 DOM，隨著瀏覽器自身性能越來越好，以后會(huì)不會(huì)又回歸到 原生 DOM ？