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

Solid 是什麼？Solid 號稱擁有 JSX 語法，類似於 React hook 的語法，你可以用現代化的開發方式，獲得性能最快的代碼。真正的既要又要還要。

到底有多快，我們看看 Benchmark

原生 JS 是 1， Solid 1.05， 比 Svelte 也快，React 跑到了 1.93 。爲什麼這麼快？讓我們來揭開神祕的面紗。官方也提供了 playground，可以實時看到打包後的代碼，不如上去動手感受一下～

首先，官方代碼如下：

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>
    </>
  );
}

這個代碼，看起來，可以說跟 React Hook 一毛一樣了，可以理解，也期望以後新創建的框架，都可以往 React 等框架語法靠攏。而不是又創建一套新的語法。真的學不動啊，程序員不要內卷程序員。這點 Solid 框架作者就做得不錯。

那爲什麼快，猜測有三點：

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

  2. 響應式原理，精準更新對應的值

  3. 提前編譯，更小的包體積，尺寸小

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

我們看一下他編譯出來的代碼，可以發現，他的 DOM ，是原生 DOM ，其他的語法是直接調用的，也沒有那一整套複雜的虛擬 DOM

二、提前編譯，按需打包

無論是 react 還是 vue ，不管怎麼編譯，都需要引入框架本身。也就是 runtime 。而且這個體積還比較大。這些框架都採用的是用運行時方案，運行時方案相比於編譯時方案，最大的優勢是可以**「幾乎沒有任何語法約束」**的去完成代碼編寫。而 Solid 則預編譯，將 jsx 部分的代碼，轉換成原生的語法。

我們直接看代碼， 如果把對應的 click 事件去掉，看看 build 之後的代碼是怎麼樣的。

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

三、響應式原理，精準更新對應的值

如果瞭解 React 的原理，就會知道，只要是 props 或者 state 改變，React 組件就會重新渲染，而每一次判斷是否會重新改變，值是否不一樣，也是一整套算法…… Solid 不一樣，他另闢蹊徑，每一個組件都是一個獨立的線程，每個組件裏的 createMemo 或 createEffect 裏面去收集對應的依賴， 在 set 改變值後，都會重新執行這些方法。看起來就像是實時更新了一樣。

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

從這兩段代碼，他就可以實現，當 value 值改變時，會自動重新渲染 createMemo，createEffect 裏的方法，自動更新 DOM 對應的值。響應式變化。

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

關鍵的步驟如下：

  1. createeffect 分析依賴還有回調，存入全局變量

  2. read 的時候，如果有這個依賴對應的值，則放入 subscriptions。爲什麼這裏需要使用 {count()} 函數才能讀取值也是因爲這期間要處理一些事情。

  3. write 的時候，去 subscriptions 裏面觸發對應的函數

總結

我們分析了 Solid 爲什麼性能這麼快，主要從下面三個方面來講：

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

  2. 響應式原理，精準更新對應的值

  3. 提前編譯，更小的包體積，尺寸小

學習借鑑下原理挺不錯的，在生產環境中使用還是算了，畢竟一個新框架前期正處於快讀迭代的過程中，肯定會有一堆棄用的 api。且他的生態距離 react，vue 的生態，還需要發展幾年。選用一個框架，如果考量他的性能，也要考量可維護性，編碼效率等…

前端的技術發展，從原生 DOM ，到虛擬 DOM，隨着瀏覽器自身性能越來越好，以後會不會又迴歸到 原生 DOM ？

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

猜你喜歡